成都网站开发中常见的rem布局

今天创新互联的网站开发工程师将为大家带来在日常开发中常见的rem布局设计，今天创新互联则为大家分享一下常见的rem布局的设计经验，让大家可以在日后的网站开发中更好的使用与再次开发。

网易的rem布局
随着分辨率的增大，页面的效果会发生明显变化，主要体现在各个元素的宽高与间距。375680的比320680的导航栏明显要高。能够达到这种效果的根本原因就是因为网易页面里除了font-size之外的其它css尺寸都使用了rem作为单位，比如你看导航栏的高度设置代码：

header,footer{

height:.90rem;

}

网易页面上html的font-size不是预先通过媒介查询在css里定义好的，而是通过js计算出来的，所以当分辨率发生变化时，html的font-size就会变，不过这得在你调整分辨率后，刷新页面才能看得到效果。你看代码就知道为啥font-size是直接写到html的style上面的了（js设置的原因）. 这样的话，每个页面中的宽高以及具体值只要除以100即可，而根节点的字号则是font-size=deviceWidth / 6.4，页面宽度如果是640px，则转换之后是6.4rem。需要注意的是，字号需要额外的媒体查询，而不是rem定的。

//字号单独用px即可 ，这里建议大家用变量定义小中大正常集中字号常量就可以，不用每次去针对具体样式做字号调整。

@media screen and (max-width:321px){

.m-navlist{font-size:15px}

}

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

.m-navlist{font-size:16px}

}

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

.m-navlist{font-size:18px}

}

//设置基本的字号,基本元素取材除100即可得到rem的大小，当然也可以用16px换算改变根字号为6.25rem即可。因为还有很大比例的手机设计为320的，所以这里考虑为640的。当屏幕大于640的时候，不再放大，让页面处于水平居中640px显示。

function fontAuto(){

var deviceWidth = document.documentElement.clientWidth;

if(deviceWidth > 640) deviceWidth = 640;

document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

}

fontAuto();

window.onresize=function(){

fontAuto();

}

阿里rem布局
淘宝的效果跟网易的效果其实是类似的，随着分辨率的变化，页面元素的尺寸和间距都相应变化，这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前，先来了解一点关于viewport的知识，通常我们采用如下代码设置viewport。

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等，魅族note的手机还有6p的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置。js中可以通过devicePixelRatio拿到具体的设备数值。

1. 动态设置viewport的scale

var scale = 1 / devicePixelRatio;

document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.动态设置font-size

document.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px';（3）布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10 （4）font-size可能需要额外的媒介查询，并且font-size不使用rem，这一点跟网易是一样的。

备注：你也可以通过阿里的现成的解决方案去实现，然后在预处理器中去处理px单位的字号<scriptsrc="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"

以上就是创新互联为大家带来的关于成都网站开发中常见的rem布局的相关介绍，希望能够帮助大家，在日后的开发中帮助到大家。

分享文章：成都网站开发中常见的rem布局
文章出自：/news32/319082.html

成都网站建设公司_创新互联，为您提供网站收录、静态网站、网站设计公司、营销型网站建设、网站维护、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联