`<meta>`标签

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width，设置视口宽度为设备宽度
user-scalable=no，是否允许用户缩放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0，最初缩放比，最大缩放比，最小缩放比

二倍图

物理像素&物理像素比

物理像素指屏幕显示的最小颗粒，是物理真实存在的
在PC端页面中，1px等于1物理像素，移动端不一定
1px能显示的物理像素点的个数，称为物理像素比

流式布局(百分比布局)

通过将盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制。

max-width,max-heighgt,min-width,min-height，最大宽度，高度，最小宽度，高度
1vw,1vh表示视口宽度/高度的百分之一

flex布局

详见Flex布局

rem布局

1em等于当前元素的font-size，1rem(root em)等于根元素的font-size，是相对于html元素的字体大小

通过rem修改所有盒子的宽度和高度，实现整体的控制

媒体查询

媒体查询(Media Query)是CSS3的新语法

@media可以针对屏幕尺寸设置不同的样式

1 2	// 仅表示格式 @media mediatype and\|not\|only (media feature){}

mediatype可为all，用于所有设备，print用于打印和打印预览，screen用于屏幕
and可将多个媒体特性连接在一起，not排除某个媒体类型，only指定某个特定的媒体类型，可以省略
media feature媒体特性，例如width、min-width、max-width

// 在宽度小于800px的屏幕上，body的背景颜色为skyblue
@media screen and (max-width: 800px) {
    body {
        background-color: skyblue;
    }
}

媒体查询+rem实现元素动态变化

@media screen and (max-width: 800px) {
    html{
        font-size: 3vw;
    }
}
@media screen and (max-width: 600px) {
    html{
        font-size: 5vw;
    }
}

媒体查询引入资源

1
2

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">  // 屏幕320px以上用style320
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">  // 屏幕640px以上用style640

响应式布局

通过媒体查询实现，针对不同宽度的设备进行布局和样式的设置，一般分为四个档位

手机，尺寸<768px
平板，768<=尺寸<992px
桌面显示器，992<=尺寸<1200px
宽屏设备，尺寸>=1200px

响应式需要一个父级作为布局容器来配合子级元素实现变化，原理为在不同屏幕下通过媒体查询来改变布局容器的大小，在改变子元素的大小与排列方式

@media screen and (max-width: 767px) {  
       .container{
           width: 100%; 
       }  
   }  
   @media screen and (min-width: 768px) {  
       .container{       
           width: 750px;  
       }  
   }  
   @media screen and (min-width: 992px) {  
       .container{  
           width: 970px;
       }  
   }  
   @media screen and (min-width: 1200px) {  
       .container{ 
           width: 1170px;   
       }  
   }