移动端布局关键是要设置meta标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
布局使用 rem em px 百分比
下面重点说一下rem 的使用
1:浏览器根元素(html)默认的font-size的大小是16px
这样的话如果我们想要使用rem 来完成布局,就需要用我们(测量的页面宽)/16 得到的就是rem
例如:定义页面宽100 换成rem
100/16=6.25rem
2: 自己定义浏览器根元素(HTML)的font-size的大小
例如:
html {
font-size:20px;
}
.con{
width:845/20=42.25rem;
}
如果使用sass
@function px2rem($px){
$rem : 37.5px;
@return ($px/$rem) + rem;
}
页面写的时候
height: px2rem(90px);
width: px2rem(90px);;
3:rem 基准值的计算
我们拿到的视觉图是什么样的,我们就可以用设计稿的宽/font-size 的大小,这个值随便定义,不想使html字体太大,一般定义为10
例如:我们用iPhone6为基准设计的,那就是375/10=37.5
之后就用我们测量的宽/37.5来定义
如果为了好计算,一般640/16=40为基准,好计算一点
今天就到这里了,see you