使用rem进行自适应页面布局
设计师给到我们前端的设计稿一般是按照iphone6屏幕(iphone6 两倍屏
设备
|
分辨率(物理尺寸)
|
屏幕宽高
|
PPI
|
状态栏高度
|
导航栏高度
|
标签栏高度
|
---|---|---|---|---|---|---|
|
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进行自适应页面布局的更多相关文章
- jQuery实现等比例缩放大图片让大图片自适应页面布局
通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...
- 2016 医疗项目 Bootstrap 自适应页面布局(1)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...
- Web前端代码规范与页面布局
一. 规范目的: 为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化. 二. ...
- 利用层的table-row、table-cell属性进行页面布局
利用层的table-row.table-cell属性可以进行等高.宽度自适应页面布局,这是参看了<我所知道的几种display:table-cell的应用>及<基于display:t ...
- web app 自适应 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- 使用rem设计移动端自适应页面三(转载)
使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen ...
- 使用rem设计移动端自适应页面一(转载)
1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
随机推荐
- Oracle 11g 发行版2的安装,PLSQL_Developer安装 , Oracle数据库安装失败,完全卸载,常用的命令
Oracle 11g 发行版2的安装 PLSQL_Developer安装 Oracle数据库安装失败,完全卸载oracle11g 常用的命令 Oracle 11g 发行版2的安装 1. 下载 下载地址 ...
- HashMap探究
HashMap 前置 //初始化容量 static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; //容器最大容量 static final i ...
- (转)Spring boot(一):入门篇
https://www.cnblogs.com/ityouknow/p/5662753.html#!comments 构建微服务:Spring boot 入门篇 什么是Spring Boot Spri ...
- 线程间的通信_多生产者多消费者问题_JDK1.5新特性_Lock
对于同步代码块,对于锁的操作是隐式的但是在JDK1.5之前的这种方法效率有点低,判断会很多,后面升级之后有新的解决方案 jdk1.5以后将同步和锁封装成了对象,并将操作锁的隐式方式定义到了该对象中,将 ...
- linux之基本命令进阶
一 配置yum源管理与软件管理 yum常见工具 tree telent sl cowsay yum install tree #安装tree命令,以树形目录显示 #由于每次安装都有确认的提示,取 ...
- 2个Excel表格核对技巧
技巧1.利用Spreadsheet Camprare一秒钟识别差异数据 如下图所示,我们如何快速比对我们自己做的表格和上司修改后的表格的差异呢?这里首先来介绍一个非常棒的工具:Spreadsheet ...
- mysql 创建 mb4 字符集数据库
create database sina default character set utf8mb4 collate utf8mb4_unicode_ci; show variables like ' ...
- <数据结构与算法分析>读书笔记--数学知识复习
数学知识复习是<数据结构与算法分析>的第一章引论的第二小节,之所以放在后面,是因为我对数学确实有些恐惧感.不过再怎么恐惧也是要面对的. 一.指数 基本公式: 二.对数 在计算机科学中除非有 ...
- Linux内核poll内部实现
前言 poll机制用于实现IO多路复用.所谓IO多路复用,通俗的讲,其实就是线程复用,使其能在一个线程上处理多个IO. 用户空间 用户通过调用用户空间的poll函数使用该机制. 驱动部分的实现 用户如 ...
- C++ 实现strcpy
strcpy库函数的原型: // 把src字符串拷贝到dest,并返回dest char *strcpy(char *dest, const char *src) 注意点: 1.形参src用const ...