您的位置:首页 > 移动开发

移动端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;
}
}
  • 点赞
  • 收藏
  • 分享
  • 文章举报
lain嘻嘻 发布了10 篇原创文章 · 获赞 2 · 访问量 2109 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: