随手一记-移动web

为什么要用rem？

rem的主要目的就是解决用于不同屏幕的适配问题。rem能够等比例的适配所有的屏幕。

单纯使用流式布局的结果是宽度自适应 高度是写死的 导致不能完全适配设计图(因为不同的屏幕大小下 高度永远是写死的), 而使用rem就可以让高度也保持自适应效果

流式布局：虽然可以让各种屏幕都适配，但是显示效果不是非常的友好，因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。

rem布局：rem能够适配所有的屏幕，与less配合使用效果会更好。

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。它就是一个相对单位。

既然是一个单位, 而px也是一个单位 所以但凡是使用px的地方都可以使用rem来代替 而rem单位的大小永远参照的是html的font-size值 1rem = html的font-size的大小

​

特点: 一旦html的font-size发生了改变 那么rem的大小也会发生改变

rem与宽高自适应

1. rem是一个单位,所以,所有可以使用px的地方都是替换成rem
2. rem的参照物是html的font-size值 所以 只需要html的font-size发生改变 rem的大小就会跟着改变
3. 动态改变html的font-size就可以实现宽高自适应

需求:

750的设计图里面量取了一个盒子的宽高分别是100px 100px, 当缩放到375的屏幕里面盒子的宽高应缩放成50px 50px 使用rem怎么去做

=> 需求: 根据不同的屏幕 设置不同的html的font-size

媒体查询

媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

根据不同的屏幕大小去加载不同的css样式

​

语法说明:
​
media screen (条件) {
  满足条件加载的css内容
}
​
// 条件说明
1. min-width: 320px => 最小宽为320 (320以上的设备)
2. max-width: 640px => 最大宽为640 (640以下的设备)
3. width: 540px     => 宽度等于540
           

​

易错点:

1. 媒体查询仅仅是提供一个条件 不会提升权重 所以一般媒体查询写在最下面

2. 绝对大坑: and前后必须要有空格

   rem与媒体查询

   使用rem配合媒体查询可以适配多个终端

   需求：基于750的设计图,里面得到的盒子的大小为100px 100px 改写成rem 自定义html的font-size为50 可以实现在主流手机里面宽高自适应

   主流手机机型屏幕：320 360 375 384 400 414 424 480 540 720 750

   ​

   px转换成rem的公式: px/html的font-size值

   动态计算主流屏幕对应的html的font-size值公式: 主流手机机型屏幕/(设计图的宽 / 基于这个设计图的html的fontsize)

​
@media screen and (min-width: 320px) {
 html {
   font-size: 21.33333333px;
}
}
@media screen and (min-width: 360px) {
 html {
   font-size: 24px;
}
}
@media screen and (min-width: 375px) {
 html {
   font-size: 25px;
}
}
@media screen and (min-width: 384px) {
 html {
   font-size: 25.6px;
}
}
@media screen and (min-width: 400px) {
 html {
   font-size: 26.66666667px;
}
}
@media screen and (min-width: 414px) {
 html {
   font-size: 27.6px;
}
}
@media screen and (min-width: 424px) {
 html {
   font-size: 28.26666667px;
}
}
@media screen and (min-width: 480px) {
 html {
   font-size: 32px;
}
}
@media screen and (min-width: 540px) {
 html {
   font-size: 36px;
}
}
@media screen and (min-width: 720px) {
 html {
   font-size: 48px;
}
}
@media screen and (min-width: 750px) {
 html {
   font-size: 50px;
}
}
           

REM开发的几点说明

1. rem开发不需要在缩放设计图咯,因为rem是宽高都等比例的缩放
2. rem开发的时候宽度的自适应沿用之前的主流写法,没必要将自适应宽度盒子也设置成rem,高度的话或者固定的宽度盒子需要改成rem
3. px2rem插件是有一个默认的root font-size ,在工作开发中需要注意这个取值是否和自己当前设置的值吻合

rem的整体梳理

1. 得到一个固定大小的设计图 直接使用px的方式还原设计图
2. 由于px和rem都是单位,所以可以将px转换成rem 为了方便计算: 设置html的font-size: 50px
3. 后期只需要添加固定的媒体查询 去动态调整html的font-size取值 就可以实现宽高的自适应