媒体查询
所谓的响应式页面都是用媒体查询做的
/*如果设备宽度在0-800px则生效*/
@media (max:width: 800px){
/*css code*/
}
/*设备宽度在321px-375px时生效*/
@media (min-width: 321px) and (max-width:375px){
/*css code*/
}
/*语法*/
@media (查询条件){
/*css code*/
}
/*也可以在link标签上使用*/
/*当设备宽度在0-320px之间才会生效，但始终会下载*/
<link rel="stylesheet" href="xxx.css" media="(max-width:320px)">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
//宽度=设备宽度，用户无法缩放，初始缩放倍数1.0 最大/最小缩放倍数1.0
移动端特性
- 没有hover
- 有touch事件
- 记录touch开始的位置和结束的位置，相减就能得到用户滑动的方向
- 没有滚动条
- 没有resize
动态REM-手机专用的自适应方案
什么是REM：
-
px：像素 -
em：一个m的宽度 -
rem：root em 根元素(html)的font-size - 例如html的
font-size为16px，那么1rem = 16px
页面默认的font-size是16px
Chrome浏览器默认的最小字号是12px，所以不允许设置12px以下的font-size，即使你设置在12px以下，显示的字体大小依旧是12px
rem和em的区别
em是等于当前元素的font-size
rem是根元素的font-size
动态rem
手机端无法做响应式
只能采取两种方案
- 百分比布局
- 缺点：高度无法确定，如果一个按钮宽高比为2:1，此方法做不到
- 整体缩放
- 使用rem来做
于是这就有了动态REM方案
使用JS让根元素的font-size等于设备的宽度，然后我们知道 1rem = 根元素的font-size
所以自需要根据设计图上的百分比来写就好了
但是请记住 12px原则 ！！ font-size不能小于12px！！！还要记得写meta:vp
在需要写特别小的单位时，比如border，可以用px，还有font-size，最好是所有屏幕的字体大小都一样
但是这样很麻烦，我们每次都要计算百分比，所以接下来我们将将如何用SASS将px变成rem
- 安装node-sass
npm install node-sass -gnode-sass main.scss -w main.css- 写scss
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
