思维导图
rem单位
rem (root em)是一个相对单位,类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
1 | /* 根html 为 12px */ |
rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。
媒体查询
媒体查询作用★
根据不同的分辨率为标签设置不同的样式
什么是媒体查询
媒体查询(Media Query)是CSS3新语法。
- 使用 @media查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
媒体查询语法规范
- 用 @media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
1 | @media mediatype and|not|only (media feature) { |
- mediatype 查询类型
将不同的终端设备划分成不同的类型,称为媒体类型
- 关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and:可以将多个媒体特性连接到一起,相当于“且”的意思。
- not:排除某个媒体类型,相当于“非”的意思,可以省略。
- only:指定某个特定的媒体类型,可以省略。
媒体特性
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含
媒体查询书写规则
注意: 为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写,这样代码更简洁
代码演示★
最大宽度320PX,超过了就不会生效。如果屏幕宽度小于等于320PX该样式生效
1 | @media screen and (max-width:320px){ |
最小宽度320PX,如果小于320px就不生效了,如果屏幕宽度大于等于320PX该样式生效
1 | @media screen and (min-width:320px){ |
如果屏幕宽度在801-900之间使用该样式
1 | @media (min-width: 801px) and (max-width: 900px) { |
less 基础
维护css弊端
CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
- CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的。
- 不方便维护及扩展,不利于复用。
- CSS 没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less 介绍
Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器。
做为 CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。
它在CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。
常见的CSS预处理器:Sass、Less、Stylus
一句话:Less是一门 CSS 预处理语言,它扩展了CSS的动态特性。
VSCode插件安装——EasyLess
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件,重新加载下 vscode。
只要保存一下Less文件,会自动生成CSS文件。
less嵌套案例(三点的骰子)★
html
1 | <div class="big"> |
less
1 | @fontSize: 24px; |
变量的定义和使用
定义格式 @变量名:值; 变量名用纯英文
使用格式 width:@变量名;
Less 变量名的语法规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
1 | // 定义变量 |
&符号
如果遇见 (交集|伪类|伪元素选择器) ,利用&进行连接
1 | a:hover{ |
less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
1 | /*Less 里面写*/ |
注意
除法运算要加(),比如width: (100rem / @fontSize);
运算符的左边和右边需要有空格
如果参与运算的两个数据都有单位以第一个为准
如果两个值之间只有一个值有单位,则运算结果就取该单位
rem适配方案
适配目标
1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。
技术方案
1.less+rem+媒体查询
2.lflexible.js+rem
总结:
两种方案现在都存在。方案2 更简单
rem适配方案1
详细步骤:(万字文,不想看直接看适配方式2,按照步骤来即可)
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
③每一份作为html字体大小,这里就是50px
④那么在320px设备的时候,字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100100像素的页面元素在 750屏幕下, 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
⑧320屏幕下, html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结
①最后的公式:页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者:页面元素的rem值 = 页面元素值(px) / html font-size 字体大小
rem 适配方案2★
相比较适配方案1的优势
适配方案1需要手动写媒体查询,在不同的分辨率上给html标签设置不同的字体大小。媒体查询程阶梯式的,不能做到很精确,比如在320
360分辨率上使用的是同样大的字体可能,如果要在320360分辨率上分别显示不同大小的字体,手动实现几乎不可能,但是适配方案2可以实现。
手机淘宝团队出的简洁高效 移动端适配库
我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理
它的原理是把当前设备划分为N(默认10)等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值: 页面元素的px 值 / 75
剩余的,让flexible.js来去算
github地址:https://github.com/amfe/lib-flexible
使用Flexible.js完成REM布局技术点总结
因为flexible是默认将屏幕分为10等分
但是当屏幕大于750的时候希望不要再去重置html字体了
所以要自己通过媒体查询设置一下
并且要把权重提到最高
VSCode px 转换rem 插件 cssrem
因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置
使用步骤
第一步: 为vscode安装并配置cssrem插件
安装插件
配置插件
文件->首选项-设置 搜索cssrem.填写1REM对应的文字大小。比如原型图750,页面分成10份。那么1REM=75PX 。则填写75即可
第二步:引入flexible.js到当前项目
flexible.js的作用就是代替媒体查询,给不同分辨率下的html设置字体大小。
在页面使用script标签引入js
1 | <script src="./flexible.js"></script> |
第三步:引入normalize.css,reset.css
normalize.css
reset.css
1 | /*点击高亮我们需要清除清除 设置为transparent 完成透明*/ |
第四步:适配最小和最大分辨率,并且为body标签设置最小和最大宽度
编写媒体查询的作用:适配最小和最大分辨率。比如要适配的最下分辨率320PX,最大分辨率750PX,分辨率小于320,页面内容就不能再继续缩小;分辨率大于750,页面内容就不能再继续放大。
新建common.css
1 | /* 适配最大分辨率,如果页面超过750PX则设置html文字大小为75px。表示页面内容不能再放大了 */ |
最终的html代码
1 |
|