持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情
rem
rem是一个相对单位,基准相对于html元素的字体大小
rem的优点就是可以通过修改html里面的文字大小 来改变页面中元素的大小可以整体控制
根元素(html)设置font-size=12px;
非根元素设置width:2rem,则换成px表示就是24px
1.首先我们选一套标准尺寸 750为准
2.我们用屏幕尺寸,除以划分的份数,得到了html里面的文字大小,但是我们知道不同屏幕下得到的文字大小是不一样的
3页面元素的rem的值 = 页面元素在750px下的px值 /html里面的文字大小
将页面划分15等分
@media screen and (min-width: 320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 50px;
}
}
flexible.js(推荐)
手机淘宝团队出的简洁高效的移动端的适配库 原理: 把当前设备划分为10等份,但是在不同设备下,比例还是一致的 所以只要确定好当前设备的html的文字大小
&example
当前页面的设计稿为750px时, 只需要将html的文字大小设置为75px (750px /10) 里面页面的元素的rem值: 页面元素的px值 /75 剩余部分可以交给 flexible.js去计算
media媒体查询引入样式表 (从小到大)
<link rel="stylesheet" style="style320.css" media="screen and (min-width: 320px)">
less
less是一门css预处理语言,扩展了css的动态特性
安装less npm install -g less
检测是否安装成功 less -v
导入less文件
@import "common";
定义变量
@color: pink; @font14: 14px;
background: @color;
less嵌套
.header {
a {
//如果有伪类,交集选择器,伪元素选择器, 我们内层选择器的前面需要加&
&:hover {
}
}
}
less运算
两个数参与运算,如果只有一个单位,最后的结果就以这个单位为准
两个数都有单位,而且不一样,以第一个单位为准
width: 82 / 50rem;
height: 82rem / @baseFont;
height:(200px + 50px) * 2;
color: #666 - #222;
less编译
Easy Less
