设计师给到我们前端的设计稿一般是按照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. Oracle 11g 发行版2的安装,PLSQL_Developer安装 , Oracle数据库安装失败,完全卸载,常用的命令

    Oracle 11g 发行版2的安装 PLSQL_Developer安装 Oracle数据库安装失败,完全卸载oracle11g 常用的命令 Oracle 11g 发行版2的安装 1. 下载 下载地址 ...

  2. HashMap探究

    HashMap 前置 //初始化容量 static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; //容器最大容量 static final i ...

  3. (转)Spring boot(一):入门篇

    https://www.cnblogs.com/ityouknow/p/5662753.html#!comments 构建微服务:Spring boot 入门篇 什么是Spring Boot Spri ...

  4. 线程间的通信_多生产者多消费者问题_JDK1.5新特性_Lock

    对于同步代码块,对于锁的操作是隐式的但是在JDK1.5之前的这种方法效率有点低,判断会很多,后面升级之后有新的解决方案 jdk1.5以后将同步和锁封装成了对象,并将操作锁的隐式方式定义到了该对象中,将 ...

  5. linux之基本命令进阶

    一  配置yum源管理与软件管理  yum常见工具 tree telent sl  cowsay yum install tree #安装tree命令,以树形目录显示 #由于每次安装都有确认的提示,取 ...

  6. 2个Excel表格核对技巧

    技巧1.利用Spreadsheet Camprare一秒钟识别差异数据 如下图所示,我们如何快速比对我们自己做的表格和上司修改后的表格的差异呢?这里首先来介绍一个非常棒的工具:Spreadsheet ...

  7. mysql 创建 mb4 字符集数据库

    create database sina default character set utf8mb4 collate utf8mb4_unicode_ci; show variables like ' ...

  8. <数据结构与算法分析>读书笔记--数学知识复习

    数学知识复习是<数据结构与算法分析>的第一章引论的第二小节,之所以放在后面,是因为我对数学确实有些恐惧感.不过再怎么恐惧也是要面对的. 一.指数 基本公式: 二.对数 在计算机科学中除非有 ...

  9. Linux内核poll内部实现

    前言 poll机制用于实现IO多路复用.所谓IO多路复用,通俗的讲,其实就是线程复用,使其能在一个线程上处理多个IO. 用户空间 用户通过调用用户空间的poll函数使用该机制. 驱动部分的实现 用户如 ...

  10. C++ 实现strcpy

    strcpy库函数的原型: // 把src字符串拷贝到dest,并返回dest char *strcpy(char *dest, const char *src) 注意点: 1.形参src用const ...