设计师给到我们前端的设计稿一般是按照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. windows服务器设置文件属性设置去掉隐藏已知文件类型的扩展名(即文件后缀名可见)

    摘要: 1.文件后缀名不可见,系统运维过程容易发生同名不同后缀的文件操作混淆的情况 2.windows系统默认是文件后缀名不可见 3.所以需要更改一下配置. 4.操作步骤如下图: (1)点击组织-文件 ...

  2. Maven 变量及常见插件配置详解

    Maven 的 pom.xml 常用 变量 插件 配置 详解 一.变量 - 自定义变量及内置变量 1. 自定义变量 <properties> <project.build.name& ...

  3. 关于数据库不适合docker的原因(摘抄)

    所有的服务都开始了容器化升级,在一切皆容器的主流思想下,无状态的服务采用容器化已经是大势所趋,常常困扰架构师的一个问题是,数据库是否需要容器化? 数据库不适合容器化的七大原因 1. 数据不安全 即使你 ...

  4. transition: 0.2s all ease;

    /* 全部样式 0.2秒 缓动*/ transition: 0.2s all ease;

  5. 错误: 无法访问InstrumentationTestRunner 找不到android.test.InstrumentationTestRunner的类文件

    错误: 无法访问InstrumentationTestRunner找不到android.test.InstrumentationTestRunner的类文件

  6. vue框架简介

    MVVM框架概述 什么是vue 是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层 vue的兼容性 Vue.js 不支持 IE8 及其以下版本,因 ...

  7. python 3.6练习题(仿购物车)

    opop = [ ('Iphone', 9800), ('Bike', 800), ('Mac Pro', 12000), #定义商品列表 ('Pyhon book', 120), ('Telas', ...

  8. Android学习之基础知识一

    一.Android的系统架构: 1.Linux内核层:提供Android硬件的各种驱动(显示驱动,音频驱动,蓝牙驱动,WiFi驱动等等) 2.系统运行库层:提供各种特性支持(数据库支持,绘图支持,浏览 ...

  9. MySQL(四)字段及常用函数

    一.字段 数据库表中的每一行叫做一个“记录”,每一个记录包含这行中的所有信息,但记录在数据库中并没有专门的记录名,常常用它所在的行数表示这是第几个记录. 在数据库中存放在表行列交叉处的数据叫做“值”, ...

  10. linux中断源码分析 - 初始化(二)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 本篇文章主要讲述源码中是如何对中断进行一系列的初始化的. 回顾 在上一篇概述中,介绍了几个对于中断来说非常重要的 ...