rem+媒体查询
rem是一个相对单位,类似于em,em是父元素字体大小,而rem是相对于html元素的字体大小。比如HTML的字体设置为12px,那么2rem就代表了24px。
媒体查询
它是CSS3的新语法
使用@media查询,可以针对不同的媒体类型设置不同的样式,当重置页面的大小时,页面会根据浏览器的宽度和高度重新渲染页面。
@media mediatype and|not|only (media feature) {
css-code;
}
@media开头
mediatype媒体类型
关键字and not only
(media feature)媒体特性 必须有小括号包含
mediatype媒体类型
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕,平板电脑,智能手机等
关键字
and 可以把多个媒体的特性连接在一起
not 排除某个多媒体类型 可以省略
only 指定某个特定的媒体类型 可以省略
media feature媒体特性
width 定义页面设备中可见区域的宽度
min-width 定义输出页面的最小可见区域宽度
max-width定义输出设备中页面最大区域宽度
媒体查询+rem可以实现元素动态大小变化
rem是跟着HTML动的,有了rem元素可以设置不同大小尺寸
媒体查询可以根据不同宽度来修改样式
两者结合就可以在不同设备的宽度下,动态改变页面的变化
引入资源
当样式比较多的时候可以针对不同的媒体使用不同的stylesheets,它的原理就是直接在link中判断设备的尺寸,然后引入不同的css文件。
规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href=mystylesheet.css"">
css的弊端
需要书写大量没有逻辑的代码,冗余度很高
不方便维护,不利于重复利用
没有很好的计算能力
所以需要采用新技术less
Less
less变量
变量是指没有固定的值,可以改变。所以css中的一些颜色和数值经常使用下边的方式来替换
@变量名:值;
变量命名规范
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
Less嵌套
这是css的写法
#header .logo {
width:300px;
}
下边是less的写法
#header {
.logo{
width:300px;
}
}
注意:
如果有伪类、交集选择器、伪元素选择器 内层的选择器前面需要加&
a{
&:hover{
}
}
a{
&::hover{
}
}
less运算
任何数字、颜色或者变量都可以参与运算
@width: 10px + 5;
div{
border: @width solid red;
width: (@width + 5) * 2;
}
rem适配技术使用
方案1:
less+媒体查询+rem
方案2(更简单):
flexible.js+rem
less+媒体查询+rem
1、设计稿常见尺寸宽度
iPhone4.5 640px
iPhone678 750px
Android 常见320px、360px、375px、384px、400px、414px、500px、720px
2、动态设置html标签和font-size大小
假设设计稿是750px
假设把整个屏幕分成15等份
每一份作为html字体大小,就是50px
在设备是320px时,字体就是320/15就是21.33px
用页面元素除以不同的html字体大小就会发现比例相同
假如是750的设计稿
一个100100的像素页面在750屏幕下100/50转换成rem是2rem2rem比例是1:1
320屏幕下,html字体大小为21.33 则2rem=42.66 此时宽高比还是1:1,这样就实现了盒子等比缩放
3、元素大小取值方法
页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是html中font-size的字体大小
4、设置公共common,less文件
我们关心的尺寸有320px、360px、375px、384px、400px、414px、500px、720px等等
划分的份数为15份
html{font-size: 50px;}
@no:15;
@media screen and (min-width: 320px) {
html{font-size: 320px / @no;}
}
@media screen and (min-width: 360px) {
html{font-size: 360px / @no;}
}
@media screen and (min-width: 375px) {
html{font-size: 375px / @no;}
}
@media screen and (min-width: 384px) {
html{font-size: 384px / @no;}
}
@media screen and (min-width: 400px) {
html{font-size: 400px / @no;}
}
@media screen and (min-width: 414px) {
html{font-size: 414px / @no;}
}
@media screen and (min-width: 424px) {
html{font-size: 424px / @no;}
}
@media screen and (min-width: 480px) {
html{font-size: 480px / @no;}
}
@media screen and (min-width: 540px) {
html{font-size: 540px / @no;}
}
@media screen and (min-width: 720px) {
html{font-size: 720px / @no;}
}
@media screen and (min-width: 750px) {
html{font-size: 750px / @no;}
}
然后用@import "common"引入另一个less文件
@import "common";
flexible.js+rem
flexible.js是一个简洁高效的移动端适配库
它把当前设备划分成10份,但比例还是一致的
我们只需要确定好当前设备的html文字大小
比如当前设计稿是750px,那么只需要把html文字大小设置为750px /10=75px就可以
那么rem值就是页面元素px值/75
当设备的宽度超过了750px,页面的宽度就设定为750px
@media screen and (min-width:750px){
html{
font-size: 75px!important;
}
}