rem布局原理菜鸟教程_布局使用指南

1 em、rem、meta标签的基本概念em 是一个布局的长度单位,当前对象内文本的字体大小的相对单位,也就是说相对于当前元素的font-size。rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系。物理像素是硬件的一个实际像素;而逻辑像素是我们在网页设计中使用的像素。它跟物理像素的

rem布局原理菜鸟教程

1 em、rem、meta标签的基本概念

em 是一个布局的长度单位,当前对象内文本的字体大小的相对单位,也就是说相对于当前元素的font-size。

rem布局原理菜鸟教程_布局使用指南

rem 是(根)字体大小相对单位,也就是说跟当前元素的font-size没有关系,而是跟整个body的font-size有关系。

物理像素是硬件的一个实际像素;而逻辑像素是我们在网页设计中使用的像素。它跟物理像素的关系是有一个设备像素比的关系,比如说设备像素比是2,那么就说明一个逻辑像素对应着4个物理像素,它们是一个平方的关系。

meta标签,我们可以指定浏览器的适口,适口就是可以看见的区域。然后它有三个需要了解的概念,分别是:

layout viewport 浏览器的默认适口,也就是clientWidth,在PC端如果把浏览器最大化的时候我们可以发现clientWidth与innerWidth是相同的,但是在移动端是不一样的;它是移动设备默认的viewport。

visual viewport 浏览器的可视区域大小,在手机浏览器中的innerWidth是小于clientWidth,在PC端最大化的时候两者是一样的,但是在手机端最大化是两者是不一样的。

ideal viewport 是一个理想化的适口viewport。这个概念更多的取决于具体的需求,比如说在2倍的环境下开发和当前的尺寸下开发那么它的ideal viewport是不一样的。这里面有一个概念叫initial-scale 缩放比例,它是layout viewport相对于ideal viewport 的缩放比例。更准确的说ideal viewport是由layout viewport和initial-scale 缩放比例决定的。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

上面代码的意思是:name是用来指定适口的,content 具体内容,第一个width宽度等于设备宽度,initial-scale缩放比例是1,最大的缩放比例也是1,然后不允许用户缩放。里面的width和initial-scale都是指定ideal viewport,如果两者都存在,那么取两者之间的较大值。

2 移动端的适配设备屏幕

最终目标是设计稿能够等比缩放在设备上。既然我们要设计稿等比缩放在设备上,那么所有的设备都要有一个统一的适口,对我们而言统一的适口就叫做ideal viewport 理想的适口,我们得到这个理想的适口就需要动态的去处理Mate标签:

  • 像素比 – 1 – scale=1
  • 像素比 – 2 – scale=2
  • 像素比 – 3 – scale=3
  • 获取设备的像素比

首先获取像素比,根据设备的像素比来指定不同的initial-scale,像素比可能是1,2,3,那么我们在设置的时候就用1除以这个像素比。下面是一个动态处理Mate标签scale的代码:

var devicePixelRatio = window.devicePixelRatio;
var scale = 1 / devicePixelRatio;

var metaElement = document.createElement('meta');
metaElement.setAttribute('name', 'viewport'); metaElement.setAttribute(
    'content',
    'initial-scale=' + scale + ',
     maximum-scale=' + scale + ',
     minimum-scale=' + scale + ',
     user-scalable=no'
);

document.documentElement.firstElementChild.appendChild(metaElement);

处理完理想的ideal viewport接下来就要处理根节点的尺寸(font-size取适口的十分之一)。因为我们使用的rem布局在不同的设备上要有不同的根节点来保证我们得到的比例是一样的。

var rem = document.documentElement.clientWidth / 10
document.documentElement.style.fontSize = rem + 'px'

3 还原设计图

移动端:

设计图一般而言手机端的设计图尺寸它都是640px * 750px,为什么是这个尺寸呢?因为我们知道iPhone是320但是设计图给的是真实像素的宽度640。有很多个原因,首先第一个是为了兼容大多数设备的折中方案,640它向下向上,320都可以清晰;第二个是为了避免高清屏图片的模糊,如果给的是一个320的设计图放到640px的设备上肯定就模糊了;还有一个原因是1px的边框问题,比如在iPhone上它的像素比是2,如果给的是一个320px的设计图,它上面的1px的边框实际上在我们的设备显示过程中就会变成一个2px的边框,因为它的像素比是2,所以为了避免这个问题设计图尺寸用的是640px * 750px。

设计图的缩放是高清屏下面的0.5倍缩放,普通屏不缩放。

PC端:

缩放比例都是一比一;font-size设计图尺寸一般来讲都是1920px * 1080px。

4 vm / vh 与 rem

rem

需要动态设置根尺寸font-size。用户无法设置更大字体(因为有一个动态指定字体的过程,所以用户很难再去处理这个字体)

rem布局原理菜鸟教程_布局使用指南

vw / vh

rem布局原理菜鸟教程_布局使用指南

在移动端布局的时候,为了高清的还原设计图我们需要根据设备的像素比把我们实际的ideal viewport做一个缩放,缩放的目的就是为了保证设计图的尺寸跟实际的物理像素是对应的。

海计划公众号
(0)
上一篇 2020/03/29 01:43
下一篇 2020/03/29 01:43

您可能感兴趣的内容

  • 优阁网【UIGreat】小白指南_UI设计师学习交流社区

    优阁网【UIGreat】小白指南 官方网址:http://www.uigreat.com/ 简介描述:UI设计师学习交流社区 UIGREAT-优阁,是一个UI设计师学习交流分享的平…

    2020/03/06
  • ES6入门之Promise对象基础教程_Promise基础教程

    1. Promise 的含义Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件更合理、更强大。 1.1 什么是Promise简单来说就是一个容器,里面保存着某个未来才会结束的事件(也就是异步操作)的结果。从语法上来讲,Promise是一个对象,从它可以获取异步操作的消息,它提供统一的API,各种异步操作都可以用同样的方法进行处理。

    2020/03/24
  • 用什么工具保证一致的代码风格?菜鸟攻略_代码菜鸟知识

    1. 理解问题首先这个问题展开来讲就是”如何在Node.js模块编写中保持代码一致性风格”。目前来说基本上有四种工具可以完成JSLint,JSHint,JSCS,ESLint。下面将从历史的角度来看看他们四个有什么关系,以及选用建议。2. 发展历程关于保持代码一致性风格,我们可以追溯到Lint。Lint是啥?Lint是针对C语言源码的检测工具,它的功能就是看

    2020/03/30
  • vuestic-admin基础入门_ 一个响应式的后台管理模板

    vuestic-admin基础入门 官方网址:http://vuestic.epicmax.co GitHub:https://github.com/epicmaxco/vuest…

    2020/03/06
  • JavaScript中发出HTTP请求最常用的方法指南教程_请求小白攻略

    JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中,我们将介绍一些在JavaScript中发出HTTP请求的流行方法。AjaxAjax是发出异步HTTP请求的传统方式。可以使用HTTP POST方法发送数据,并使用HTTP GET方法接收数据。我们来看看发送GET请求。我将使用JSONPlaceholde

    2020/03/23
  • Editor.js小白帮助_JSON格式输出数据的富文本和媒体编辑器

    Editor.js小白帮助 官方网址:https://editorjs.io GitHub:https://github.com/codex-team/editor.js 简介描述…

    2020/03/06
  • 中国人才热线基础入门_优质人才、校园、专场、猎头等服务

    中国人才热线基础入门 官方网址:http://www.cjol.com/ 简介描述:优质人才、校园、专场、猎头等服务 中国人才热线为求职者提供最新最全的招聘信息,为企业提供优质人才…

    2020/03/06
  • 原来JS是这样的使用帮助对象属性_对象小白攻略

    例子:var strPrimitive = “I’m mamacat”;
    typeof strPrimitive; // “string”
    strPrimitive instanceof String; // falsevar strObject = new String(“I’m mamacat”);
    typeof strObject; // “objec

    2020/03/26
  • javascript回调函数的理解和使用方法(callback)教程视频_函数菜鸟教程

    js回调函数的作用?在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 举个例子:比如你到商场买东西,刚好没有你需要的货品,这时候你留下电话,店里有货了救让店员通知你,然后你接到电话到店里取到了货。这里的电话号码就可看做回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫

    2020/04/05
  • NodeJs生成sitemap站点地图入门攻略_Sitemap入门知识

    如果博客是使用Hexo管理的,sitemap可以使用插件来生成。但对于一个内容管理网站,后端可能是express、koa之类的框架,这时sitemap就需要自己来生成了什么是sitemapSitemap可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的Sitemap形式,就是XML文件,在其中列出网站中的网址以及关于每个网址的其他元数据(上

    2020/03/30
  • html中a标签的4个伪类样式小白攻略_伪类基础教程

    在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了,查找了一些资料,也上网查找了一下,也有很多人在问及这个问题,如果是按照这种顺序排序,有时候显示正确,而有时候却显示不正确,追究原因,这个可能

    2020/03/26
  • 本地数据存储解决方案以及cookie的坑入门攻略_存储入门攻略

    问题:cookie过长导致页面打开失败背景:在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷新当前页面仍然保留着多个iframe,现在刷新有两种方式,第一种是键盘中按F5或者ctrl+F5或者ctrl+R,第二种是点击浏览器的左上角进行刷新,点击F5时可以通过监听键盘的F5点击事件进行阻止默认刷新达

    2020/03/29
  • VueJS 实际开发中会遇到的问题小白常识_vue作者: 熊D01001小白教程

    由于公司的前端开始转向 VueJS,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用。主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。涉及技术栈CLI: Vue-CLIUI: ElementHTML: Pug(Jade)CSS: LessJavaScript: ES6正文:polyfill 与 transform-r

    2020/04/06
  • 10分钟快速了解 React 基础基础入门_react指南攻略

    如果你还不会 React,希望本文可以帮你快速了解 React.js 的基础知识。创建项目使用 create-react-app 工具快速创建 React SPA。# 创建项目
    yarn create react-app my-appcd my-app# 开发模式下运行程序
    yarn start项目初始结构:my-app/README.mdnode_modu

    2020/03/26
  • 小技巧:检查你本地及公共 IP 地址使用说明_技巧使用指南

    你本地的 IP 地址: 192.168.1.100上面是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。如果你找不到上述任何地址,请在 Linux 上执行 ifconfig 或 ip命令手动检查内部 IP 地址:# ifconfig | grep -w inet | awk ‘{ pr

    2020/04/03
  • <a>标签中href=javascript:与href=#入门指南_标签小白攻略

    这两种写法。这两种写法到底有什么不同呢?用哪种来写更加规范呢?将href=”#”是指联接到当前页面,其实是无意义的,页面也不会刷新。这是一个锚链接。在制作网页时html语言里的参数,用于指定链接的url ####就是本页链接,href=”地址”就是链接到地址 链接本页面

    2020/03/26