设计师给到我们前端的设计稿一般是按照iphone6屏幕(iphone6 两倍屏
设备
分辨率(物理尺寸)
屏幕宽高
PPI
状态栏高度
导航栏高度
标签栏高度

iPhone6

750×1334 px 375×667px 326PPI 40px 88px 98px
)实际大小给出的标注,我们如何在尽可能多的屏幕上 1:1 的还原设计稿呢?

如今使用比较多的方式就是rem,(rem是尺寸的单位,相对根节点的字体大小的一个单位)。

比如设计稿中一个标注宽 30px(iphone6),我们实际写样式时应该为15px(两倍屏会将我们的15px放大为实际的30px,换句话说:把30个像素填充到了15px的宽度里)。

这样我们对照这iphone6上的设计稿写出的样式在iphone6手机上的表现与设计稿是保持一致的,那么我们怎样让样式在其他手机屏幕上也能保持这个比例去适应呢?

我们只需要去改变在相应手机屏幕上的根结点的font-size即可,这样页面中的其他不布局仍然会保持与设计稿中的比例显示。

在实际中,为了方便换算单位,习惯把在iphone6中的根结点font-size大小设置为100px,

可参考我们服务号中设置根结点大小的方式,如下:

const winW = (document.documentElement.clientWidth || document.body.clientWidth) / 3.75;
document.documentElement.style.fontSize = `${winW}px`;
// 当页面大小发生改变,重新修正rem为新窗口尺寸的3.75分之一
window.onresize = function resize() {
let wid = document.documentElement.clientWidth || document.body.clientWidth;
if (wid > 1024) {
wid = 1024;
} else if (wid < 320) {
wid = 320;
}
wid /= 3.75;
document.documentElement.style.fontSize = `${wid}px`;

使用rem进行自适应页面布局的更多相关文章

  1. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

  2. 2016 医疗项目 Bootstrap 自适应页面布局(1)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局

     1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...

  4. Web前端代码规范与页面布局

    一.    规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化.   二.     ...

  5. 利用层的table-row、table-cell属性进行页面布局

    利用层的table-row.table-cell属性可以进行等高.宽度自适应页面布局,这是参看了<我所知道的几种display:table-cell的应用>及<基于display:t ...

  6. web app 自适应 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  7. 使用rem设计移动端自适应页面三(转载)

    使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen ...

  8. 使用rem设计移动端自适应页面一(转载)

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...

  9. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

随机推荐

  1. 异常检测(anomaly detection)

    版权声明:本文为博主原创文章,转载或者引用请务必注明作者和出处,尊重原创,谢谢合作 https://blog.csdn.net/u012328159/article/details/51462942 ...

  2. Docker搭建wordpress博客环境(Centos7)

    Docker搭建wordpress博客环境(Centos7) 升级系统 yum -y update 设置docker库 sudo yum install -y yum-utils sudo yum-c ...

  3. 18LaTeX学习系列之---LaTeX的参考文献

    目录 目录 前言 (一)简单的参考文献 1.说明 2.源代码 3.输出效果 (二)以文件管理的方式 1.说明: 2.源代码: 3.输出效果 (三)直接从源网站获取 1.说明 2.操作 目录 本系列是有 ...

  4. UVA12171-Sculpture(离散化+floodfill)

    Problem UVA12171-Sculpture Accept: 196  Submit: 1152 Time Limit: 3000 mSec Problem Description Imagi ...

  5. 统计硬币 HDU - 2566 (三种解法:线性代数解法,背包解法,奇思妙想解法 >_< )

    题号放这里自己去找吧. HDU-2566 这题最开始用的dp,然后,被同学用奇思妙想过了.  >_<  开心! -_- !! 然后,被我线性代数给过了. 方法一:dp 将其化为01背包,只 ...

  6. 分布式爬虫之elasticsearch基础6(bluk)

    上篇文章介绍了在es里面批量读取数据的方法mget,本篇我们来看下关于批量写入的方法bulk. bulk api可以在单个请求中一次执行多个索引或者删除操作,使用这种方式可以极大的提升索引性能. bu ...

  7. 关于npm --save还是-save的横岗数量的细节的记录

    最近又开始鼓捣npm了,所以得稍微记录一下. 首先是npm install xxx --save 和 npm install xxx -save这两的区别(注意加粗的部分,横杠数不一样).当我搜索-- ...

  8. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  9. 【Codeforces 1120C】Compress String

    Codeforces 1120 C 题意:给一个串\(S\),将这个串分成\(t_1..t_m\),如果\(t_i\)在\(t_1..t_{i-1}\)中作为子串出现过,那么这个的代价是\(b\),否 ...

  10. 洛谷 P1525 关押罪犯

    题目链接 https://www.luogu.org/problemnew/show/P1525 题目描述 S城现有两座监狱,一共关押着N名罪犯,编号分别为1−N.他们之间的关系自然也极不和谐.很多罪 ...