用rem写css(CSS中的媒体查询以及rem单位)
1-em和rem的区别
两个都是相对单位
em 值的大小取决于父元素的字体大小
rem 值的大小取决于html的字体大小
2-媒体查询@media (width:375px) {
检测设备屏幕宽度在375px时发生变化
html{
将屏幕大小分为十等分,当html字体大小发生变化时,rem的值也会随着变化
font-size: 37.5px;
}
}
媒体查询主要就是检测不同设备屏幕,但设备种类较多,每一个都写媒体查询不现实.便捷方式可以用js来实现这一功能.
3-flexible用js来检测设备屏幕,在body内最下面用<script src="./js/flexible.js"></script>来引入flexible js文件.
4-rem的计算方式rem=(设计稿上的值 / 37.5px的标准值)
5-less(预处理器,css的升级版)下载less插件,后缀名.less生成less文件.
less语法和css有所不同.后代选择器和伪类选择器.后代选择器在less中可以直接嵌套.&表示当前标签.
less中可以实现加减乘除.
可以设置变量.
引入其他less文件进行关联@import url(./base.less);
禁止导出文件,在首行添加 // out:false
,
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com