移动端rem布局

小明106
167 阅读6分钟

移动端rem布局

  • 什么是rem布局
  • rem单位的使用
  • 媒体查询
  • 如何使用less扩展语言
  • flexible.js的使用
  • rem布局实际开发如何操作
graph TD
rem布局的需要 --> rem单位的使用
rem布局的需要 -->媒体查询使用
rem布局的需要 --> less扩展语言的辅助

什么是rem布局

rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。它配合媒体查询可以做到屏幕宽度大小自动适应，字体大小也自动适应，是现在主流的移动端布局方式。

需要知识点：rem布局需要掌握rem单位的使用，媒体查询，以及less扩展css语言的辅助计算宽度让其更加方便
注意：在rem布局中，我们不再使用px值，因为px值无法适配屏幕大小，会出现布局混乱，所有值统一使用rem值
原理操作：rem布局根据html根标签的字体大小1：1的比例缩放，利用媒体查询设置好屏幕宽度值将html根标签的font-size对应屏幕的尺寸的值，以此来达到屏幕随着宽度变化而变化。
简单理解就是：每个人体质（相当于宽度）不同，吃的饭量（相当于html的字体大小）也不同；

代码示范：

/*  需要将屏幕统一划分等份，这里是15等份 */
@media screen and (min-width: 320px){
  font-size: 21.333px;/*320 / 15 需要统一除以这个等份*/
}
@media screen and (min-width: 540px){
  font-size: 36px;/*320 / 15 需要统一除以这个等份*/
}
html{
  font-size: 50px;
}
div{
  margin: 1rem auto;
  width: 4rem;
  height: 4rem;
  background-color: pink;
}

rem单位的使用

rem是一个相对单位，类似于em，em是父元素字体大小
rem是基于html根标签的字体大小
特点：rem是基于html根标签的字体大小,不会父元素文字大小不一致，整个页面只有一个html根标签，可以很好的控制整个页面的大小比例
举例：根标签html的font-size：12px，其他元素width：2rem转换成px表示24px
rem=根标签的font-size值 / width的px值

媒体查询

媒体查询：能在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。

语法规范

  • 用@media开头，注意@符号
  • mediatype媒体类型
  • 关键字 and not only
  • media feature 媒体特性 必须有小括号包含
@media mediatype and|not|noly (media feature){
  css样式(rem布局设置html的font-size)
}

mediatype媒体类型

将不同的终端设备划分为不同的类型，称为媒体类型

属性值简介
all所有设备
print打印机和打印预览
screen电脑屏幕、平板电脑、智能手机等

关键字( and not only )

关键字将媒体类型或者多个媒体特性连接到一起作为媒体查询的条件

  • and：可以将多个媒体特性链接到一起，相当于且的意思
  • not:排除某个媒体类型，相当于非的意思
  • or：可以测试多个媒体查询条件，只要有一个条件成立则执行
  • only：指定某个特点媒体类型
    媒体特性：media feature

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格
注意：他们需要在小括号内进行

属性值简介
width定义输出设备页面可见区域的宽度
min-width定义输出设备页面最小可见区域的宽度
max-width定义输出设备页面最大可见区域的宽度

代码示范：

@media screen and (max-width: 540px){
  html{
    font-size: 10px;
  }
}
@media screen and (min-width: 541px){
  html{
    font-size: 15px;
  }
}
@media screen and (min-width: 970px){
  html{
    font-size: 20px;
  }
}
image.png image.png

引入资源

当样式比较繁多时候，我们可以针对不同的媒体使用不同的 stylesheets（样式表）
原理：直接在link标签中判断设备尺寸，引入不同css文件

语法规范：<link rel="stylesheet" media="mediatype and|not|noly(media feature)" href="mystylesheet.css"


代码示范：
<link rel="stylesheet" media="screen and(max-width: 400px)" href="mystylesheet.css"

如何使用less扩展语言

什么是less

less是css的扩展语言，less在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情
为什么有less： CSS 是一门非程序式语言，CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用

less变量
变量是指没有固定的值，可以动态改变css中的数值和颜色等等
@变量名：值
注意:

  • 必须有@前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感 代码示范：
(@+属性名):css样式属性值
@fs15：15px;
@color：blue；

body{
  color：@color；
}
p{
  font-size:@fs15;
}

less编译

本质上less包含一套自定义语法以及一个解析器，用户根据语法定义样式规则，再通过解析器编译成css文件
需要将.less文件编译成.css文件，html页面才可以直接使用

编译方法：

node.js：在当前文件夹，使用cmd命令 ”lessc style.css>style.css“
使用vscode安装插件直接自动生成编译(easy less插件名扩展)

less嵌套

css
#header .logo{
  width: 300px;
}

less
#header{
  .logo{
    width: 300px;
  }
}

如果是兄弟选择器、伪类选择器、伪元素选择器
注意：
内层选择器的前面没有 &符号，则会被解析为父选择器的后代；
如果有&符号，则会被解析为父元素自身或者父元素的伪类

css选择器
a:hover{
  width: 300px;
}


less嵌套
a{
  &:hover{
    width: 300px;
  }
}

less运算

任何数字、颜色、变量都可以运算，less提供了+、-、*、/ 四种算术运算，除法需要在（）内进行运算

注意：

  1. 参与运算的两个数字，至少一个要有单位，最终取第一个数字单位为单位
  2. less的运算符左右必须加空格
  3. 除法必须在括号内进行运算
a{                                  a{
  font-size:(15px / 3)； less==》css      font-size: 5px;         
}                                     }

flexible.js的使用

  1. flexible能够自动把设备划分10等份，不用再自己设置调配屏幕的大小宽度。
  2. 我们只需要屏幕最大尺寸确定好html根文件的字体大小，加上！important让其权重最高即可。
  3. 再配合rem单位使用来完成rem布局

flexible.js地址：github.com/amfe/lib-fl…
将flexible.js文件引入html即可

html引入js文件
<script src="flexible.js"></script>


css确定最大屏幕尺寸html的根文件字体大小
@media screen and(min-wdith: 屏幕大小){
html{
  font-size: 需要的数值 !important;/*加上important让其权重最高*/
  }
}

rem实际开发适配方案

技术需要：rem+媒体查询+less技术
操作实例：

  1. 动态设置根标签font-size大小，比如设置为50px；
  2. 查看设计稿屏幕宽度，比如：750px；
  3. 将屏幕划分15份，看屏幕大小来划分适合等份，划分好多少份后就固定多少份
  4. 每一份作为html根标签的字体大小，这里便是50px=1rem；
  5. 在320px设备时候，字体大小便是320px/15=21.33px;在less文件中直接运算就可以
  6. 宽高都使用rem单位
avatar
文章
阅读
粉丝