用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

用rem写css(CSS中的媒体查询以及rem单位)(1)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页