rem适配布局
1.rem单位
rem是一个相对单位,类似于em,em是父元素字体大小
不同的是rem的基准是相对于html元素的字体大小
比如,根元素html设置font-size = 12px,非根元素设置width:2rem;则换成px表示就是24px
/*1.em相对于父元素的字体大小来说的*/
/*width: 10em;*/
/*height: 10em;*/
/*2.rem相对于html元素 字体大小来说的*/
width: 10rem;
height: 10rem;
background-color: pink;
/*3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小*/
2.1 什么是媒体查询
媒体查询是CSS3新语法
/*这句话的意思就是:在我们屏幕上 并且 最大的宽度是800px 设置我们想要的样式*/
/*max-width 小于等于800*/
/*媒体查询可以根据不同的屏幕尺寸改变不同的样式*/
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
注意:为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的哈市从小到大来写,这样代码更简洁
CSS的弊端
- CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的
- 不方便维护及扩展,不利于复用
- CSS没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少CSS编写经验很难写出组织良好且易于维护的CSS代码项目
3.4 Less变量
3.7 Less运算
@border: 5px + 5;
div {
width: 200px - 50;
height: 200px * 2;
border: @border solid red;
}
img {
width: (82 / 50rem);
height: (82 / 50rem);
}
//1.我们运算符的左右两侧必须敲一个空格隔开
//2.两个数参与运算 如果只有一个数有单位,则最后的结果就以这个单位为准
//3.两个数参与运算,如果2个数都有单位,而且不一样的单位,最后的结果以第一个单位为准
rem适配方案
1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配
3.元素大小取值方法
(1)最后的公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
(2)屏幕宽度/划分的份数 就是 html font-size 的大小
(3)或者:页面元素的rem值 = 页面元素值(px)/ html font-size 字体大小
1.简洁高效的rem适配方案flexible.js
手机淘宝团队出的简介高效 移动端适配库
我们再也不需要再写不同屏幕的媒体查询,因为里面js做了处理
它的原理是把当前设备划分为10等分,但是不同设备下,比例还是一致的
我们要做的,就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是750px 那么我们只需要把html文字大小设置为75px(750px/10)就可以
里面页面元素rem值:页面元素的px值/75
剩余的,让flexible.js来去算