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

标题: 王嘉乐-2022-10-26前端 [打印本页]

作者: yousay！ 时间: 2022-10-27 00:47
标题: 王嘉乐-2022-10-26前端
一、今日学习内容媒体查询
mediatype  媒体类型
all：用于所有的设备 print：用于打印设备或者打印预览 screen：用于电脑屏幕、平板电脑或者手机等。
关键字 and not only
media feature  媒体特性，在小括号中书写
   width：定义输出设备中页面可见区域的宽度
   min-width：定义输出设备中页面最小可见区域的宽度
      max-width：定义输出设备中页面最大可见区域的宽度

@media mediatype and/not/only （media feature）{ css-code}；

less的运算
如果两个参与计算的数值，只有一个值有单位，那么就用有单位的值的单位
加（+）、减（-）、乘（*）、除（/）
除法运算需要在运算外加括号，否则不生效运算符左右两边要有空格隔开
less+rem+媒体查询 50px
让一些不能等比例自适应的元素，达到不同的尺寸时，根据html字体的大小变化来用rem作为单位，控制元素进行自适应变化
公式：页面元素的rem值 = 页面元素的px值  /  html 的字体大小
html的字体大小 = 屏幕的宽度 / 划分的份数
flexible.js+rem 75px

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