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

标题: 陈玉-20221026-rem布局 [打印本页]

作者: polaris123 时间: 2022-10-27 02:11
标题: 陈玉-20221026-rem布局
一、今日学习内容
1.rem概念：rem（root em）是一个相对单位，和em不同的是rem相对基准是对于html元素的字体大小来说的
  优点：父元素的字体大小可能不一样，但是整个页面只有一个html标签，可以很好的控制整个页面的元素大小。
2.媒体查询：概念：使用 @media 来进行查询，可以针对不同的媒体类型定义不同的样式，也可以根据不同的屏幕尺寸来设定不同的样式
  语法规范：
1.用@media 来进行开头；

2.mediatype  媒体类型
all：用于所有的设备
print：用于打印设备或者打印预览
screen：用于电脑屏幕、平板电脑或者手机。

3.关键字 and not only

         4.media feature  媒体特性，在小括号中书写
综合写法：@media mediatype and/not/only （media feature）{ css-code}；
3.LESS（CSS预处理器）
  优点：比CSS功能更多，增加了程序语言特性。有很好的计算能力，方便拓展复用。
  3.1 less嵌套
  3.2 less运算
   特点：
1.任何的数字、颜色或者变量都可以参与运算

         2.基本的运算符有：加（+）、减（-）、乘（*）、除（/）
   语法规范：
运算符左右两边要有空格隔开
除法运算需要在运算外加括号，否则不生效
对于两个不同的单位的值之间的运算，运算结果取前面的值的单位
如果两个参与计算的数值，只有一个值有单位，那么就用有单位的值的单位
4.rem适配方案
  4.1 less+rem+媒体查询
  原理：让一些不能等比例自适应的元素，达到不同的尺寸时，根据html字体的大小变化来用rem作为单位，控制元素进行自适应变化。
  rem的实际开发适配方案  设置设计稿宽度——将屏幕划分等份———用rem作为单位控制元素自适应变化
   公式：页面元素的rem值 = 页面元素的px值  /  html 的字体大小
html的字体大小 = 屏幕的宽度 / 划分的份数
  4.2 flexible.js+rem
   优点：不需要在写不同屏幕的媒体查询
   原理：把当前设备划分为10等份，但是不同设备下，比例还是一致的
二、今日问题
今日未遇到问题，今天学习内容已掌握

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