移动端rem布局
2020-02-03 12:28
357 查看
rem适配原理:动态计算html根节点的字体大小
使用media结合rem来做适配,rem单位,em是相对父级元素的字体大小来说的
rem是相对于html元素的字体大小来说的
rem的优点就是可以通过修改html根节点的文字大小来修改页面中元素的大小
媒体查询可以根据不同的屏幕尺寸,改变不同的样式.
@media screen and(max-width:800px){ body{ } }
css的弊端: 不方便维护,没有很好的计算能力
less介绍:是一门css预处理语言,css的扩展语言,也称为css预处理器(在css里加入了程序式语言)
如果遇见 (交集|伪类|伪元素选择器) ,利用&进行连接
a:hover{ color:red; } a{ &:hover{ color:red; } }
首先我们选择一套标准尺寸;
我们用屏幕尺寸除以我们划分的份数,得到了html里面的文字大小(根字体的大小),
但是我们知道不同屏幕下的到的文字大小是不一样的;
页面的rem元素值= 页面元素在750像素下的px值 / 文字大小
设计稿:一般是750px
根字体的大小= 屏幕尺寸 / 划分的份数
适配原理:使用媒体查询 设置屏幕不同的区间 然后给不同区间设置根字体的大小(动态计算)
步骤:
1.在公共样式里 利用媒体查询设置不同屏幕下的根字体的大小 common.less;
2.在index.less中引入公共样式 @import “common”;(import是把一个样式文件导入到另一个样式文件中)
3.在html中引入css文件;
4.初始化body样式body {
min-width:320px;
width:15rem;
margin:0 auto;
}
50px只是一个计算的基准值,是750px这个区间的根字体的大小
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; } }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 移动端页面自适应解决方案—rem布局-(旧方案)
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
- REM布局,自适应移动端JS分享(px自动转化为rem)
- 一看就懂得移动端rem布局、rem如何换算
- 一看就懂得移动端rem布局、rem如何换算
- 移动端(阿里rem)布局
- 移动端 rem 布局的一些总结
- 移动端适配不同手机 rem布局
- rem自适应布局-移动端自适应必备:flexible.js
- 移动端布局 - REM方式
- 移动端页面自适应解决方案 rem布局
- 拉钩、网易、淘宝移动端rem布局分析(转载非原创)
- 关于移动端rem 布局的一些总结
- 移动端rem自适应布局(切图)
- 简单的移动端rem布局方法
- 关于移动端rem 布局的一些总结
- 一看就懂得移动端rem布局、rem如何换算
- 移动端的自适应rem布局
- 【转载】rem自适应布局-移动端自适应必备
- rem自适应布局-移动端自适应必备:flexible.js