视口

meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？ 不急，我们先往下面看，这里先留个悬念。 几个专有名词和单位 这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。 首先，先来看一下 物理像素 。 以iphone6为例，可知道： 分辨率 ：1334pt x 750pt 指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。 屏幕尺寸 ：4.7in 注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。 屏幕像素密度 ：326ppi 指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时， 屏幕像素密度 = 分辨率 / 屏幕尺寸 接着，我们来看一下其他的单位。 设备独立像素 ：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是， 物理像素 开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。 这个方法就是 getBoundingClientRect。 1.getBoundingClientRect方法简介 getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。 使用方法如下： let domToTop = dom.getBoundingClientRect().top // dom 的顶边到视口顶部的距离 let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离 let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离 let domToRight = dom

vw 相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度 vh 相对于视口的高度。视口被均分为100单位的vh (即浏览器可视区) 100vh = 可视区高度 vmin/vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm） 参考： 视区相关单位vw, vh..简介以及可实际应用场景 结论： vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！ //zxx: 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等 很重要的运用场景是： 1.手机适应屏幕尺寸时，如需订列表缩略图的宽高时，如（1:1）且可自适应， .img-wrap{ width: 30vw; height: 30vw; } 2.活动页，分享等单页面 body{ height:100vh; } 来源： https://www.cnblogs.com/zhu-shixin/p/6384396.html

前言 不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。 在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在。这是因为，在印刷上，尺寸大小都是有固定的，不用考虑在页面上使用。我认为流体排版技术可以和网页很好的匹配。这是在不同媒介上的一种解决方法。 并不意味着我们要推翻之前的所有关于排版的认识，只需要去学习如何用不同方式，去运用掌握新的技术。只要注意细节，就可以制作出适配所有屏幕尺寸的完美的页面。 流体排版上手 视口（viewport）单位 ，使流体排版在页面上应用变为可能。视口单位是根据浏览器的视口尺寸的百分比来定义的。 举个例子，1视口宽度（vw）等于视口宽度的1%，它不同于百分比的地方是，它的宽度是依赖于视口的宽度的，而百分比是元素的祖先元素来决定的。 视口单位，不同于其它单位，它不依赖于基础字体的大小。这种差别很重要，使它变得有意义而且独特。 可以使用的4种视口单位 ： vw :视口宽度(viewport width) vh :视口高度(viewport height) vmin :视口宽度或高度，选择小的那个 vmax :视口宽度或高度，选择大的那个 使用流体排版最简单的方法

9.1 可视化格式模型介绍 本章和下一章描述了可视化格式模型：这种模型用于定义用户代理是怎样在可视化媒体（visual media）上处理文档树的。 在这个模型里，文档树上的每一个元素都会生成零个，一个或者多个盒子（根据盒子模型），这些盒子的布局由以下内容决定： 盒子的尺寸和类型 定位机制（普通流式（normal flow），浮动（float），绝对（absolute）定位） 文档树中各元素之间的关系 其他额外信息（例如，视口尺寸，图片的固有尺寸） 本章和下一章定义的属性同样适用于连续类媒体（continuous media）和页面类媒体（paged media）。当然，对于页面类媒体来说，margin属性有些不一样。 可视化格式模型没有指定关于格式化的所有内容（例如：字母间距的算法）。对于本规范中没有涉及到的那些格式化问题，各用户代理可能会有不同的表现行为。 9.1.1 视口（viewport） 当用户请求一个文档以后，对于连续类的媒体，用户代理会为用户提供一个视口（一个窗口或者屏幕上的一块可视区域）。当调整视口大小的时候，用户代理可能会相应的改变文档的布局。 当视口的尺寸小于用于显示文档的画布尺寸时，用户代理应该提供一种滚动机制。对于每一个画布起码要有一个视口，但是用户代理也可以渲染多个画布（例如：为同一个文档提供不同的视图） 9.1.2 包含块（Containing

移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等。 本文将从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。 一、英寸 一般用英寸描述屏幕的物理大小，如电脑显示器的17、22，手机显示器的4.8、5.7等使用的单位都是英寸。 英寸和厘米的换算：1英寸 = 2.54 厘米 二、物理像素 2.1 像素 像素即一个小方块，它具有特定的位置和颜色。 图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。 像素可以作为图片或电子屏幕的最小组成单位。 2.2 物理像素 到电商网站购买手机，都会看一看手机的参数，以apple的官网上对手机分辨率的描述为例： iPhone XS Max 和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。表示手机分别在垂直和水平上所具有的像素点数。 这里描述的就是屏幕实际的物理像素，即一个屏幕具体由多少个像素点组成。 屏幕从工厂出来那天起

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 揭开CSS3媒体查询迷雾（min-width和max-width） http://www.cnblogs.com/lozio/p/4677738.html 本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width 媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。 媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我， 这两个关键词很绕；从字面上理解它们可能不那么容易，以至于我每次都需要在脑海里面不断演算，然后小心翼翼地测试效果（大概和写正则表达式的感觉差不多）。 在这篇文章中我尝试解开媒体查询的迷雾。首先是名词解析： width: 通常指代视口宽度；另外width和device width的区别在于，device width指代是屏幕的物理宽度。比如iphone5的屏幕分辨率是1136x640，竖屏时device width是640，横屏时是1136。通常，移动设备的浏览器都是全屏的，所以一般情况下width等于device-width。但是height和device-height的情况不一样

rem 我们首先介绍下和我们熟悉的很相似的货。 em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。 body { font-size: 14px; } div { font-size: 1 .2em; // calculated at 14px * 1.2, or 16.8px } 你看，这里div这娃的字体大小是1.2em。解释来说，就是他从body爹爹那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。 但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。 虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用 rem 了。 ‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是元素了。 适用于网格布局 rem 不仅仅只是在设置字体大小上很方便。你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性， .container { width:

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。 随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。 这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。 今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！就让我们一起来交个朋友吧~ rem 我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。 <body> <div class="test">Test</div> </body> body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } 你看，这里div这娃的字体大小是1

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() 如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过 .foo { width: 100px + 50px; } $width-one: 100px; $width-two: 50px; .bar { width: $width-one + $width-two; } 学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 然而，calc() 函数提供了更好的解决方案。首先，我们能够组合不同的单元。特别是，我们可以混合计算绝对单位（比如百分比与视口单元）与相对单位（比如像素）。例如，我们可以创造一个表达式，用一个百分比减掉一个像素值。 .foo { width: calc(100% - 50px); } 本例中，.foo 元素总是小于它父元素宽度 50px。 第二，使用 calc()，计算值是表达式它自己，而非表达式的结果。当使用 CSS 预处理器做数学运算时，给定值为表达式的结果。 .foo { width: