css：响应式设计布局

概念：
“Content is like water”。用技术使网页适应从小到到 超大的不同分辨率的屏幕。

设置 Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport的参数：

width：控制 viewport 的大小
height：指定viewport 高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

@media 查询

@media only screen and only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)
也可以针对不同的媒体使用不同 stylesheets :

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

@media screen and (max-width: 600px) {
/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {}
}
@media screen (min-width: 601px) and (max-width: 800px) {
/*当屏幕尺寸大于601px小于800px时，应用下面的CSS样式*/
.class {}
}

可以针对不同的屏幕尺寸或媒体种类应用不同的样式表。

<link rel="stylesheet"type="text/css" href="styleA.css"
 media="mediatype and (media feature)">
/*only(限定某种设备) screen 是媒体类型里的一种
and 称为关键字，关键字还有 not(排除某种设备)*/

<link rel="stylesheet" type="text/css" href="styleB.css"
 media="screen and (min-width: 600px) and (max-width: 800px)"  >

方向：横屏/竖屏
结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。landscape 是横向，portrait 是纵向【ipad 相反】

@media only screen and (orientation: landscape) {
/*如果是横屏背景将是浅蓝色：*/
    body {
        background-color: lightblue;
    }
}

像素单位
rem：根据根元素的字体大小计算，通常1 rem = 16 px。
rex：微信小程序中使用，把屏幕等分成750份，每一份的大小即是1rpx。
vw/vh：将可视区域分为一百份，全屏为width:100vw;height:100vh