移动Web开发01
rem单位:
rem是一个相对单位,类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。
rem的优点,可以通过修改html里面的文字大小,来改变页面中元素的大小,来实现整体控制
媒体查询
语法规范:
媒体特性:
and不能省略
宽度必须加单位px
媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度,实现页面元素大小的动态变化。
引入资源
当样式比较繁多时,可以针对不同的媒体使用不同的stylesheets(样式表)
less基础
css的弊端
less介绍
他在css的语法基础上,引入了变量,运算以及函数等功能,大大简化了css的编写。
一句话:less是一门css预处理语言,他扩展了css的动态特性/
less变量
语法:
变量命名规范
伪类选择器的less写法
less运算
空格,单位有一个数写了就行
注意:
rem适配方案
rem适配方案技术使用(市场主流)
总结:
1、两种方案现在都存在。
2、方案2更简单
第一种方案(rem+媒体查询+less技术)
-
设计稿常见尺寸宽度
现在基本以750为准 -
动态设置html标签font-size大小
假设设计稿是750px,先把整个屏幕划分为15等分,那么一份html的font-size就是50px;实现了元素盒子等比例缩放的效果。
-
元素大小取值方法:
*屏幕宽度/划分的份数:就是html font-size的大小
*页面元素的rem值=页面元素值(px)/ html font-size字体大小
不要忘记设置大于750px尺寸的情况
@media screen and (min-width:750px){
html{
font-size:75px !important(不要忘记提高优先级,不然白改)
}
}