Hãy đăng ký tài khoản để xem được thêm nhiều thứ nữa...
Xem hướng dẫn đăng ký tài khoản tại đây
THÔNG BÁO: Chức năng gửi email của hệ thống đã hoạt động trở lại, ai bị quên mật khẩu thì có thể sử dụng chức năng I forgot my password ở giao diện đăng nhập để nhận mật khẩu mới.

[HTML - CSS] - CSS 3 - Responsive

User avatar
Administrator
Site Admin
Posts: 530
Joined: 17/08/2018 16:55:42
Họ và tên: Sao Phải Xoắn

[HTML - CSS] - CSS 3 - Responsive


Phần 1: Code mẫu responsive
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css"> 
/*Phần mặc định chung */
.demo {
  padding: 20px;
  color: white;
  background-color: #ccc;
  /*Code background này sẽ không hiển thị*/
} 


/* phần dành riêng cho từng loại thiết bị: Các thiết bị sẽ được lọc từ bước 1 -> 5
   Theo thứ tự này là hướng từ mobile đến máy tính.
*/

/*1. Dành cho điện thoại: Các thiết bị chiều rộng nhỏ hơn 480px*/
@media only screen and (max-width: 480px) {
  .demo {background: red;}
}

/*2. Thiết bị máy tính bảng hoặc màn hình điện thoại xoay ngang: Màn hình to hơn 480px, trường hợp này sẽ bao gồm tất cả các màn hình to hơn 480px, kể cả tivi, nhưng khi xuống đến dòng code bên dưới thì đã bị lọc bởi giới hạn 768px nên trong khu vực này chỉ có các loại màn hình từ 480px đến 768px là có tác dụng, vượt quá 768 sẽ rơi vào tình huống số 3 có tác dụng*/
@media only screen and (min-width: 480px) {
  .demo {background: green;}
}

/* 3. Máy tính bảng xoay ngang hoặc màn hình máy tính bàn (loại màn vuông) giới hạn chiều rộng từ 768 đến 1000px */
@media only screen and (min-width: 768px) {
  .demo {background: blue;}
} 

/* 4. Màn hình Laptop từ 1000 đến 1200px*/
@media only screen and (min-width: 1000px) {
  .demo {background: orange;}
} 

/* 5. Phần này to hơn màn hình laptop: vd loại màn 21inch trở lên, màn tivi...., nhỏ nhất là 1200*/
@media only screen and (min-width: 1200px) {
  .demo {background: gray;}
}
</style>
</head>
<body>
<h2 class="demo">Co kéo chiều rộng màn hình để thấy rõ hiệu ứng của màu nền </h2>

</body>
</html>

Post 04/09/2019 14:10:18 » by Administrator

:-bd
Chư vị chưa có tài khoản? Đăng ký tại đây nhé http://snvn.net/ucp.php?mode=register
Xem quy định sử dụng ở đây nhé http://snvn.net/viewtopic.php?f=2&t=9&p=12#p12
User avatar
Administrator
Site Admin
Posts: 530
Joined: 17/08/2018 16:55:42
Họ và tên: Sao Phải Xoắn

Re: [HTML - CSS] - CSS 3 - Responsive


Phần 2: Tư duy hệ thống lưới 12 cột

Để thiết kế giao diện web tương thích với các loại kích thước màn hình khác nhau, người ta căn cứ vào kích thước chiều rộng của màn hình, chiều dài thì không quan tâm.
Việc phân định các khối hiển thị khác nhau cho chính xác ở các loại màn hình, người ta chia màn hình thành 12 cột (hiện tại có một số thì chia 15 cột, nhưng chuẩn chung là 12 cột), các cột này có kích thước bằng nhau theo tỉ lệ %.

Với 12 cột thì mỗi cột sẽ có chiều rộng là 100/12 = 8.33333333333.... %, nhưng cơ bản chỉ cần lấy 2 số lẻ phần thập phân hoặc muốn chính xác cao thì lấy nhiều số lẻ thập phân hơn: 8.33 hoặc 8.333333, ... tùy thích.
Ví dụ như hệ thống lưới mô tả ở ảnh này:
mo-ta-he-thong-luoi.jpg
<<Link tham khảo: https://www.w3schools.com/css/css_rwd_grid.asp >>

*** Với bài toán như trong ảnh trên ta tính toán kích thước cho các khối như sau:
- Khối đầu trang chiếm 12 cột ==> width: 100%;
- Khối menu trái chiếm 3 cột ==> với 12 cột chiếm mất 3 cột vậy là 1/4 ==> chiều rộng khối menu trái là 100/4 = 25%
- Khối ở giữa: chiếm 6 cột ==> chiếm 1/2 của 12 cột ==> chiều rộng là 100/2 = 50%;
- Khối bên phải chiếm 3 cột ==> là 25%;
- Khối dưới cuối cùng chiếm 12 cột ==> là 100%

Bây giờ các khối khác nhau, để viết css cho các khối ta đặt tên các class, thì mỗi khối quy ước 1 cái tên cho dễ nhận diện:
- Khối chiếm 12 cột đặt tên là: col-12
- Khối chiếm 3 côt đặt tên là: col-3
- Khối chiếm 6 cột đặt tên là: col-6
--> tương tự đặt tên cho các khối còn lại => ta có 12 trường hợp từ 1 cột đến 12 cột: col-1, col-2, col-3, col-4, col....
Kết quả viết CSS cho các cột như sau:
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
Khi thiết kế css lưới sẽ để sẵn 12 class như vậy, có thể 1 số cái không dùng đến nhưng cũng cần để cho đủ. Đến khi cần dùng sẽ chỉ gọi tên cột ra làm việc.

Post 04/09/2019 14:27:06 » by Administrator

:-bd
Chư vị chưa có tài khoản? Đăng ký tại đây nhé http://snvn.net/ucp.php?mode=register
Xem quy định sử dụng ở đây nhé http://snvn.net/viewtopic.php?f=2&t=9&p=12#p12
User avatar
Administrator
Site Admin
Posts: 530
Joined: 17/08/2018 16:55:42
Họ và tên: Sao Phải Xoắn

Re: [HTML - CSS] - CSS 3 - Responsive


Bây giờ đến bước thực hành lưới trình bày giao diện trong ảnh trên

Bước 1: Dựng khung các khối thẻ div
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
  </style>
</head>
<body>
 
 	<div id="khoi_1" >1. Khối đầu trang</div>
 	<div id="khoi_2" >2. Khối menu trái</div>
 	<div id="khoi_3" >3. Khối nội dung ở giữa</div>
 	<div id="khoi_4" >4. Khối sidebar bên phải</div>
 	<div id="khoi_5" >5. Khối cuối trang</div> 

</body>
</html>
Bước 2: Viết css riêng cho từng khối, cho vào đầu đoạn css
/* Viết css riêng cho từng khối */
      #khoi_1{background-color: red;}
      #khoi_2{background-color: blue;}
      #khoi_3{background-color: #eee;}
      #khoi_4{background-color: green;}
      #khoi_5{background-color: cyan;}
Xong bước này chạy thử để kiểm tra màu sắc các khối

Bước 3: Thiết lập chung cho các thẻ
 /* Thiết lập chung*/
  	* {
  		/*Thuộc tính box-sizing: nếu là border-box thì sẽ tính cả border vào bên trong kích thước của khối. VD: Kích thước của khối là 100px, border là 5px thì tổng kích thước vẫn là 100px, và cái border nó nằm ở bên trong khối. Nếu giá trị thuộc tính này là: content-box thì 100px kia phải cộng thêm 2 lần 5px ở 2 bên của border và tổng chiều rộng của khối là 110px; */
	  box-sizing: border-box; 
            /* tham khảo https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
	}

	[class*="col-"] {
		/* cách chọn mới của css3: Chọn tất cả các thẻ có thuộc tính class có chứa chuỗi col- 
			mục đích: Cột nào cũng phải có thuộc tính float và có border.
		*/
	  float: left;
	  border: 1px solid yellow;
	}
Viết các class cho các thẻ div để nhận hiệu ứng css
<div id="khoi_1" class="col-12" >1. Khối đầu trang</div>
 	<div id="khoi_2" class="col-3" >2. Khối menu trái</div>
 	<div id="khoi_3" class="col-6" >3. Khối nội dung ở giữa</div>
 	<div id="khoi_4" class="col-3" >4. Khối sidebar bên phải</div>
 	<div id="khoi_5" class="col-12" >5. Khối cuối trang</div> 


Bước 4: Xem code hoàn thiện của CÁCH SỬ DỤNG LƯỚI
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /* Thiết lập chung*/
  	* {
  		/*Thuộc tính box-sizing: nếu là border-box thì sẽ tính cả border vào bên trong kích thước của khối. VD: Kích thước của khối là 100px, border là 5px thì tổng kích thước vẫn là 100px, và cái border nó nằm ở bên trong khối. Nếu giá trị thuộc tính này là: content-box thì 100px kia phải cộng thêm 2 lần 5px ở 2 bên của border và tổng chiều rộng của khối là 110px; */
	  box-sizing: border-box; 
	}

	[class*="col-"] {
		/* cách chọn mới của css3: Chọn tất cả các thẻ có thuộc tính class có chứa chuỗi col- 
			mục đích: Cột nào cũng phải có thuộc tính float và có border.
		*/
	  float: left;
	  border: 1px solid yellow;
	}

	/* Hệ thống lưới */
  	  .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}

   /* Viết css riêng cho từng khối */
      #khoi_1{background-color: red;}
      #khoi_2{background-color: blue;}
      #khoi_3{background-color: #eee;}
      #khoi_4{background-color: green;}
      #khoi_5{background-color: cyan;}

      div{ min-height: 100px; }
  </style>
</head>
<body>
 
 	<div id="khoi_1" class="col-12" >1. Khối đầu trang</div>
 	<div id="khoi_2" class="col-3" >2. Khối menu trái</div>
 	<div id="khoi_3" class="col-6" >3. Khối nội dung ở giữa</div>
 	<div id="khoi_4" class="col-3" >4. Khối sidebar bên phải</div>
 	<div id="khoi_5" class="col-12" >5. Khối cuối trang</div> 

</body>
</html>

Post 04/09/2019 14:50:19 » by Administrator

:-bd
Chư vị chưa có tài khoản? Đăng ký tại đây nhé http://snvn.net/ucp.php?mode=register
Xem quy định sử dụng ở đây nhé http://snvn.net/viewtopic.php?f=2&t=9&p=12#p12
User avatar
Administrator
Site Admin
Posts: 530
Joined: 17/08/2018 16:55:42
Họ và tên: Sao Phải Xoắn

Re: [HTML - CSS] - CSS 3 - Responsive


Phần 3: Thực hành tạo giao diện Responsive với hệ thống lưới
resps.jpg
Bước 1: Xác định các khối thẻ html, trong ảnh trên sẽ chia 3 phần: Phần 1 là khối 1, phần 2 là 3 khối ở giữa, phần 3 là khối ở cuối.
 	<div id="khoi_1" class="col-12" >1. Khối đầu trang</div>

 	<div class="row">
	 	<div id="khoi_2"  >2. Khối menu trái</div>
	 	<div id="khoi_3" >3. Khối nội dung ở giữa</div>
	 	<div id="khoi_4"  >4. Khối sidebar bên phải</div>
 	</div>
  
 	<div id="khoi_5" class="col-12" >5. Khối cuối trang</div> 

Bước 2: Xây dựng CSS:

Các thiết lập chung
/* Thiết lập chung*/
  	 * { 
	     box-sizing: border-box; 
    	}

    	[class*="col-"] { 
    	  float: left;
    	  border: 1px solid yellow;
    	  width: 100%; /* Thêm cái này cho mặc định, khi đó trong thẻ div nếu dùng 1 col-12 thì nó sẽ là 100% ở tất cả màn hình không cần chỉ rõ col-sm hay col-md... */
    	}

    	/*lớp row này để tách khối thành 1 dòng riêng, không ảnh hưởng float*/
    	.row{
    		display: block;
    		clear: both;
    	}
Thiết lập responsive, viết các col- cho các loại kích thước màn hình, tuy giống nhau nhưng phải viết tên class khác nhau để mục đích sử dụng lời gọi khác nhau:
/*1. Dành cho điện thoại: đặt tên col-.... */
    @media only screen and (max-width: 480px) {
      
      /* Hệ thống lưới */
      	  .col-1 {width: 8.33%;}
          .col-2 {width: 16.66%;}
          .col-3 {width: 25%;}
          .col-4 {width: 33.33%;}
          .col-5 {width: 41.66%;}
          .col-6 {width: 50%;}
          .col-7 {width: 58.33%;}
          .col-8 {width: 66.66%;}
          .col-9 {width: 75%;}
          .col-10 {width: 83.33%;}
          .col-11 {width: 91.66%;}
          .col-12 {width: 100%;} 
    }

    /*2. Máy tính bảng  đặt tên col-sm-.... */
    @media only screen and (min-width: 480px) {
       /* Hệ thống lưới */
      	  .col-sm-1 {width: 8.33%;}
          .col-sm-2 {width: 16.66%;}
          .col-sm-3 {width: 25%;}
          .col-sm-4 {width: 33.33%;}
          .col-sm-5 {width: 41.66%;}
          .col-sm-6 {width: 50%;}
          .col-sm-7 {width: 58.33%;}
          .col-sm-8 {width: 66.66%;}
          .col-sm-9 {width: 75%;}
          .col-sm-10 {width: 83.33%;}
          .col-sm-11 {width: 91.66%;}
          .col-sm-12 {width: 100%;}
    }

    /* 3. Máy tính desktop vuông: đặt tên col-md-*/
    @media only screen and (min-width: 768px) {
      /* Hệ thống lưới */
      	  .col-md-1 {width: 8.33%;}
          .col-md-2 {width: 16.66%;}
          .col-md-3 {width: 25%;}
          .col-md-4 {width: 33.33%;}
          .col-md-5 {width: 41.66%;}
          .col-md-6 {width: 50%;}
          .col-md-7 {width: 58.33%;}
          .col-md-8 {width: 66.66%;}
          .col-md-9 {width: 75%;}
          .col-md-10 {width: 83.33%;}
          .col-md-11 {width: 91.66%;}
          .col-md-12 {width: 100%;}
    } 

    /* 4. Màn hình Laptop từ 1000 đến 1200px: Đặt tên col-lg-*/
    @media only screen and (min-width: 1000px) {
      /* Hệ thống lưới */
      	  .col-lg-1 {width: 8.33%;}
          .col-lg-2 {width: 16.66%;}
          .col-lg-3 {width: 25%;}
          .col-lg-4 {width: 33.33%;}
          .col-lg-5 {width: 41.66%;}
          .col-lg-6 {width: 50%;}
          .col-lg-7 {width: 58.33%;}
          .col-lg-8 {width: 66.66%;}
          .col-lg-9 {width: 75%;}
          .col-lg-10 {width: 83.33%;}
          .col-lg-11 {width: 91.66%;}
          .col-lg-12 {width: 100%;}
    } 

    /* 5. Màn tivi ...: Đặt tên: col-xl-  */
    @media only screen and (min-width: 1200px) {
      /* Hệ thống lưới */
      	  .col-xl-1 {width: 8.33%;}
          .col-xl-2 {width: 16.66%;}
          .col-xl-3 {width: 25%;}
          .col-xl-4 {width: 33.33%;}
          .col-xl-5 {width: 41.66%;}
          .col-xl-6 {width: 50%;}
          .col-xl-7 {width: 58.33%;}
          .col-xl-8 {width: 66.66%;}
          .col-xl-9 {width: 75%;}
          .col-xl-10 {width: 83.33%;}
          .col-xl-11 {width: 91.66%;}
          .col-xl-12 {width: 100%;}
    }

Thiết lập riêng cho từng thẻ div
/* Viết css riêng cho từng khối */
      #khoi_1{background-color: red;}
      #khoi_2{background-color: blue;}
      #khoi_3{background-color: #eee;}
      #khoi_4{background-color: green;}
      #khoi_5{background-color: cyan;}

      div{ min-height: 100px; }
Bước 3: Viết class cho các thẻ div
	<div id="khoi_1" class="col-12" >1. Khối đầu trang</div>
 	<div class="row">
	 	<div id="khoi_2" class="col-12 col-sm-4 col-md-3 col-lg-2 col-xl-2" >2. Khối menu trái</div>
	 	<div id="khoi_3" class="col-12 col-sm-8 col-md-6 col-lg-8 col-xl-8" >3. Khối nội dung ở giữa</div>
	 	<div id="khoi_4" class="col-12 col-sm-12 col-md-3 col-lg-2 col-xl-2" >4. Khối sidebar bên phải</div>
 	</div>
 	<div id="khoi_5" class="col-12" >5. Khối cuối trang</div> 

class=" col-12 col-sm-4 col-md-3 col-lg-2 col-xl-2 " cách viết này sẽ xác định ở màn hình mobile thì chiếm bao nhiêu cột, màn hình máy tính bảng chiếm bao nhiêu cột....
Cụ thể trường hợp này:
- Mobile: chiếm 12 cột
- Máy tính bảng: 4 cột
- Máy tính bàn (màn vuông): 3 cột
- Laptop: 2 cột
- To hơn laptop: 2 cột
Với mỗi cột là khoảng 8,33333 % chiều rộng màn hình.
Nội dung đã bị ẩn
Bạn cần đăng nhập hoặc đăng ký tài khoản để xem được nội dung ẩn.

Post 04/09/2019 15:39:55 » by Administrator

:-bd
Chư vị chưa có tài khoản? Đăng ký tại đây nhé http://snvn.net/ucp.php?mode=register
Xem quy định sử dụng ở đây nhé http://snvn.net/viewtopic.php?f=2&t=9&p=12#p12
Post Reply