1. rem基础
rem单位
rem(root em)是一个相对单位,类似于em,em是父元素字体的大小。
rem的基准是相对于html元素的字体大小。
优点:
可以通过修改html里面的文字大小来改变页面中元素的大小,可以整体控制。
2. 媒体查询
媒体查询(Media Query)是CSS3新语法。
- 使用@media查询,可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 重置浏览器大小时,页面会根据浏览器的宽度和高度重新渲染页面
语法规范:
@media mediatype and|not|only (media feature) {
css-Code;
}
说明:
mediatype
媒体类型- 将不同的终端设备划分成不同的类型,称为媒体类型。
值 | 说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
scree | 用于电脑屏幕,平板电脑,智能手机 |
-
关键字
and
,not
,only
- 关键字将 媒体类型或多个媒体特性连接到一起作为媒体查询的软件。
- and:可以将多个媒体特性连接到一起
- not:排除某个媒体类型,可以省略
- only:指定某个特定的媒体类型,可以省略
-
media feature
媒体特性,必须有小括号- 每种媒体类型都具备不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。
值 | 说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
一般按照从小到大的顺序写。
媒体查询+rem实现元素动态大小变化
- rem单位跟着html变化,有了rem页面元素可以设置不同大小尺寸
- 媒体查询可以根据不同设备宽度来修改样式
- 媒体查询+rem 可以实现不同设备宽度,实现页面元素大小的动态变化
3. Less基础
- Less是一门CSS扩展语言,也成为CSS预处理器,为CSS加入程序式语言的特性,扩展了CSS的动态特性
- 它在CSS语法基础上引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本
- Less中文网址:[http://lesscss.cn](http://lesscss.cn
- 常见CSS预处理器:Sass,Less,Stylus
- 安装网址:http://nodejs.cn/download/
1)Less变量
变量是指没有固定的值,可以改变的。CSS中一些颜色和数值等经常使用。
@变量名: 值;
命名规范:
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
2)Less编译
需要把less文件,编译生成css文件,这样html页面才能使用。
3)Less嵌套
.nav {
.logo {
color: green;
}
}
4)交集、伪类、伪元素选择器
- 内层选择器的前面没有&符号,则他被解析为父选择器的后代
- 如果有&符号,他就被解析为父元素自身或父元素的伪类
a {
color: red;
&:hover {
color: blue;
}
}
5)Less运算
任何数字、颜色或变量都可以参与运算。less提供了加减乘除算术运算。
/* 代码块里面写*/
@width: 10px + 5;
div {
border: @width solid red;
}
/* 生成的css */
div {
border: 15px solid red;
}
width: (@width + 5) * 2;
注意:
- 运算符左右侧必须用空格隔开
- 两个数参与运算,如果只有一个数有单位,则最后的结果以该单位为准
- 两个数参与运算,如果两个数都有单位且不相同,则最后的结果以第一个单位为准
4. rem适配方案
- 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
- 使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配
技术方案1
- less
- 媒体查询
- rem
- 设计稿常见尺寸宽度
设备 | 常见宽度 |
---|---|
iphone 4.5 | 640px |
iphone 678 | 750px |
Android | 常见320px、360px、375px、384px、400px、414px、500px、720px;大部分安卓设备为720px |
一般情况下以一套或两套效果图适应大部分屏幕,现在基本以750为准。
- 动态设置html标签font-size大小
- 假设设计稿为750px
- 将屏幕划分为15等份(也可以是10或20)
- 每一份作为html字体大小,这里就是50px
- 在320px设备中,字体大小就是21.33px
- 元素大小取值方法
- 最后的公式:页面元素的rem值 = 页面元素值(px)/ (屏幕宽度 / 划分的份数)
- 屏幕宽度 / 划分的份数 就是html font-size的大小
- 或:页面元素的rem值 = 页面元素值(px)/ html font-size字体大小
技术方案2(推荐)
- flexible.js
- rem