菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: REM布局-袁瑞-20221126 [打印本页]

作者: Yrrrrrrrrrr 时间: 2022-11-26 00:23
标题: REM布局-袁瑞-20221126
本帖最后由 Yrrrrrrrrrr 于 2022-11-26 00:24 编辑

rem单位
      rem是一个相对单位，相对于html元素的字体大小来说的
      整个页面只有一个html元素，所以就可以很好的来控制整个页面的元素大小
媒体查询
@media  mediatype  and|not|only（media feature）{css}
      media feature
      width定义输出设备中页面可见区域宽度
min-width定义设备中页面最小可见区域宽度
            max-width定义设备中页面最大可见区域宽度
and/not/only
and可以将多个媒体特性链接到一起，相当于且的意思
not排除某个媒体类型，相当于非的意思
only指定某个特定的媒体类型
mediatype
all用于所有设备
print用于打印机和打印预览
screen 用于电脑屏幕、平板电脑、只能手机等设备
less 基础
less嵌套：如果用到链接伪类，需要在伪类前加&符，否则链接伪类不起作用
ess运算：任何数字、颜色或者变量都可以参与运算，less为我们提供了加减乘除运算
运算符中间左右要有空格隔开
如果参与运算的值有多个单位，那么就选择第一个有单位的值的单位
除法运算需要用括号括起来
REM实际开发适配方案1
页面元素的rem值 = 页面元素的px值 / html字体大小（屏幕的宽度/划分的份数）
REM实际开发适配方案2
实际方案 flexble.js + rem
下载插件css rem

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)