响应式布局 需要HTML吗,关于响应式布局，你必须要知道关于响应式布局的几件事(4)...

七、rem响应式布局

rem响应式布局思想

一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值

高度值可以设置固定值,设计稿有多大,我们就严格写多大

所有设置的固定值都用REM做单位(首先在HTML中设置一个基准值：PX和REM的对应比例,然后在效果图上获取PX值,布局的时候转化为REM值)

JS获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了

什么是rem,它与em有何区别

rem:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的

em:表示父元素的字号的倍数。(特例：在text-indent属性中，表示文字宽度)

body →font-size:20px;

→ font-size:2em;

box1

→ font-size:2em;

box2

→ font-size:2em;

box3

em为单位的时候，font-size属性是计算后继承，box1计算出来是40px。那么里面的box2、box3继承的都是40px。em单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如width、height、padding、margin、border

rem有一点优势就是可以和媒体查询配合，实现响应式布局：

@media screen and (min-width: 320px) {

html {font-size: 14px;}

}

@media screen and (min-width: 360px) {

html {font-size: 16px;}

}

@media screen and (min-width: 400px) {

html {font-size: 18px;}

}

运用场景

如果我们做的H5页面只在移动端访问，这是因为REM不兼容低版本的浏览器。而如果移动端和PC端公用一套代码，建议使用流式布局。

如何做个REM响应式布局

1、从UI设计师拿到PSD设计稿,然后在样式中给HTML设定一个font-size的值，我们一般都设置一个方便后面计算的值，例如：100px

html{

font-size:100px；//1rem=100px

}

2、写页面，写样式

首先按照设计稿的尺寸来写样式，然后在写样式值的时候，需要把得到的像素值除以100计算出对应的REM的值。

值得注意的是：真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想，我们用百分比的方式布局

margin:0 0.2rem

height:3rem；

3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值

例如：设计稿宽度为640px,其中有一个部分是轮播图，它的尺寸是600*300，在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem，那如果手机屏幕宽度为375px,其font-size应该设置为多少。

375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小

根据当前屏幕宽度和设计稿宽度的比例，动态计算一下当前宽度下的fontsize值应该是多少，如果fontsize的值改变了，之前设定的所有REM单位的值自动会跟着放大或者缩小。可以通过以下这段代码实现：

~function(){

var desW=640,

winW=document.documentElement.clientwidth,

ratio=winW/desW；

document.documentElement.style.fontSize=ratio*100+“px“；

}();

但如果当前屏幕宽度大于设计稿宽度，图片会被拉长而失真，所以以上代码需要稍微做些修改：

//html部分

//js部分

~function(){

var desW=640,

winW=document.documentElement.clientwidth,

ratio=winW/desW；

var oMain=document.getElementById('main')；

if(winW>desW){

oMain.style.width=desW+"px"；

oMain.style.margin="0 auto"；

return；

}

document.documentElement.style.fontSize=ratio*100+“px“；

}();

以上就是本文的全部内容，希望对大家的学习有所帮助