前言:
- 页面布局文字随着屏幕大小变化而变化
- 流式布局和flex布局主要针对于宽度布局,rem布局针对高度设置
- rem布局能在屏幕发生变化时,元素的高度和宽度等比例缩放
1.rem基础
rem单位
- rem是一个相对单位,类似于em,em是父元素字体大小
- 不同的是rem的基准是相对于html元素的字体大小
- 比如,根元素(html)设置font-size:12px;非根元素设置width:2rem;则换成px表示就是24px(即非根元素的width:24px)。
- rem的优点:可以通过修改html里面的文字来改变页面中元素的大小,可以做到整体控制。
2. 媒体查询
2.1 什么是媒体查询
媒体查询(media query)是css3新语法。
- 使用@media查询,可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设定不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、安卓手机、平板等设备都用得到多媒体查询
2.2 语法
1.mediatype 查询类型
2 关键字
3.媒体特性
可以根据不同的屏幕尺寸改变不同的样式
<style>
/* 在屏幕上 并且最大宽度是500像素,可以设置想要的样式 */
@media screen and (max-width: 500px) {
/* 当屏幕的宽度大于500像素时,下面的代码不起作用 */
body {
background-color: lightblue;
}
}
</style>
2.3 引入资源
语法
3 less基础
3.1 css的弊端
- css冗余度高
- 不方便维护及扩展,不利于复用
- 没有很好的计算能力
3.2 less介绍
- less是一门css扩展语言,也称为css预处理器,在css现有的语法上,加入了程序式语言特性。引入了变量、Mixin(混入)、运算以及函数功能
- less中文网址:http://lesscss.cn/
- 常见的css预处理器:Sass,Less,Stylus
3.3 less安装
3.4 less变量
后缀名为 .less 的文件
//定义变量
@变量名:值;
变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 区分大小写
//定义变量 @color: blue; //使用变量 body { background-color: @color; }
3.5 less编译
vscode插件:Easy LESS【该插件用来吧less文件编译为css文件,保存less文件后,会自动生成一个css文件,link引用】
3.6 less嵌套
.less文件
//嵌套1 子元素直接嵌套在父元素里面
div{
width:200px;
a {
color:#000;
// 加 & ,被解析为父元素自身或父元素的伪类
&:hover {
color: #fff;
}
}
.nav{
.logo {
color: #000;
}
}
3.7 less运算
- 颜色、数字和变量都能参与运算。
- 运算符左右有个空格隔开1px + 5
- 两个数参与运算 如果只有一个数有单位,则最后的结果就以这个单位为准
- 两个数的单位不同,结果以第一个单位为准
3.8 rem适配方案
3.8.1 实际开发适配方案
- 按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小;(媒体查询)
- CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值;
3.8.2 技术方案
- less+媒体查询+rem
- flexible.js+rem(推荐)
技术方案1:
元素大小取值方式
技术方案2: flexible.js是由手机淘宝团队出的
flexible.js 下载地址:https://github.com/amfe/lib-flexible