一：meta viewport
meta viewport属性主要是让viewport的宽度等于当前设备的宽度，也可以按照需求来限制用户是否可以缩放。
——————————————————————————————————————
在head里添加如下代码：
<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：让当前viewport宽度等于设备的宽度
user-scalable=no：禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0
二：媒体查询（media）
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
格式一：
@media() and () {}
//满足小括号里的条件就使用花括号里的样式
格式二：
<link rel="stylesheet" href="./css.style" media="(max-width:500px)"> //link标签会下载好，但是是否生效就取决于是否满足media的条件。
media中可以使用逻辑操作符，包括
not、and和only等，构建复杂的媒体查询。and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。not操作符用来对一条媒体查询的结果进行取反。only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。
你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。
详细可以查看MDN： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
三：rem
rem是根据网页的根元素来设置字体大小，和em的区别是，em是根据父元素的字体大小来设置，而rem则是根据网页的根元素的来设置的。
举一个简单的例子：
html {
font-size: 16px; //现在大部分浏览器，如果不更改字体配置，默认显示的font-size都是16px。
}
给一个p标签设置12px的字体就可以这样设置
p {
font-size： 0.75rem；
}
由此可见rem会根据html的font-size自适应的转变大小
rem的特性同样适用于CSS，不过一般要通过一层计算才行，比如要设置一个长度为100px的div，那么就要计算出100px对应的em值是100/16（html默认的font-size）=6.25rem。
对于没有使用sass的工程：
为了方便，可以将html的font-size设置成100px，这样在写单位时，直接将数值除以100再加上rem的单位就可以了。
动态rem的两种方案：
在script标签加入这段代码：
1：使用JS动态调整rem
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
</script>
2：使用sass实现px自动变rem
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth: 320px; 为设计稿的宽度
网友评论