移动web开发之rem布局

移动web开发之rem布局

rem基础

• rem单位是一个相对单位，类似于em，em是相对于父元素的字体大小来说的；而rem的基准是相对于html元素的字体大小。px = rem * font-size

• rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，达到整体控制的效果

媒体查询Media Query

• c3新语法

• @Media可以针对不同的屏幕尺寸改变不同的样式

• 从小到大的顺序编写代码更简洁

@media mediatype and|not|only (media feature) {
     
    css样式
}

语法

mediatype查询类型

• all：所有设备
• print：打印机和打印预览
• screen：电脑、平板、手机屏幕

关键字

• and：且
• not：非
• only：仅仅

媒体特性

• width：宽度
• min-width：最小宽度
• max-width：最大宽度

引入资源

样式繁多时，可以针对不同的媒体使用不同的stylesheet；原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。

less基础

less变量

1、定义一个变量
@变量名：值；
2、使用变量
div {属性：@变量名；}
p {属性：@变量名}

• 必须有@前缀
• 不能以数字开头，不能有特殊字符
• 变量名区分大小写

less编译

把less文件编译生成css文件（插件：easy less），保存less文件就会自动生成css文件。

less嵌套

• less嵌套，子元素的样式直接写到父元素的样式里就可以了
• 如遇伪元素，交集选择器或伪类选择器，less文件中，记得添加&符号

less文件中:
.header {
     
    color:#fff;
    a {
     
        color:#000;
        &:hover {
     
            color:pink;
        }
    }
    &::after {
     
        .....
    }
}


	
"header">
		"#">
	

less运算

任何数字、颜色或者变量都可以参与运算

• 运算符左右空格隔开
• 参与运算的两个数，以有单位的那个数为准；若是两个不同单位的数参与运算，以第一个数的单位为准

rem适配方案

• 让一些不能等比自适应的元素，达到当设备尺寸发生改变是，等比适配当前设备
• 使用媒体查询根据不同设备按比例设置html元素的font-size大小，然后其他元素全部采用rem单位，当html的font-size变化时，其他元素也会跟着变化，从而达到等比例缩放的适配

1、设计稿，动态设计html根标签的font-size大小

①假设设计稿是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值=页面元素值(px) / (屏幕宽度 / 划分的份数)
• 屏幕宽度 / 划分的份数 就是html font-size的大小

技术方案

• less+媒体查询+rem

• (推荐)flexible.js+rem

  • flexible.js库，根据当前屏幕尺寸划分为10份，动态计算并设计html的font-size值
  • cssrem:px转rem的插件，默认是16px，需要手动修改，修改后重启vs Code

less文件中导入less文件

@import "文件名（不用加后缀名）"

@import导入，可以把一个样式文件导入到另一个样式文件