viewport

准备工作： 两个像素：设备像素+css像素 设备像素： 绝对单位，设备像素即设备的物理像素，对于每个设备来说，其设备像素是固定的，它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。 css像素： 适用于web编程，是前端开发在描述css样式时经常用到的像素单位。比如，设置某个div的宽度为width：200px，这个就是css像素，是一种抽象概念，实际上并不存在。 页面的缩放： 当用户放大或者缩小页面时，改变的是css像素，而设备像素不会发生改变 如：页面中一个div，它的宽度是200px，当用户操作页面，放大两倍，此时一个css像素的面变成了4个设备像素的面积：宽放大2倍x高放大两倍 页面缩放比例（zoom level）= screen.width / window.innerWidth (一般情况下可以这么计算) 设备像素比（DPR）： 在页面缩放比为1的情况下，设备像素比（DPR） = 设备像素个数 / 视觉视口css像素个数(device-width) 对于不同的设备来说设备像素比是不一样的。在早期iphone的DPR值是等于1的，但是后来引入了高密度屏幕，即为了更清晰的展示画面，在有限的设备空间内引入了更多的设备像素。所以后来iphone设备的DPR就改变了，值一般为2 场景再现： 移动端需求：给你一个750px的设计稿

由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产生差异，并且没有那么美观。 两种解决方法： 一、transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框 首先用伪类创建边框 .border-bottom{ position: relative; } .border-bottom::after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #e4e4e4; } 然后通过媒体查询来适配 /* 1.5倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { .border-bottom::after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } /* 2倍屏 */ @media only screen and

一、网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 其中： width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放c 二、 关于meta的详细介绍请参考 三、下文是关于Meta的例子的详细介绍 原文地址 3. Meta元素可视区 　　默认情况下，iPhone上的Safari会象在大 屏幕 的桌面浏览器那样显示你的页面，宽度达到了980像素，然后缩小内容以适应iPhone的小屏幕，因此用户在iPhone看这个页面时感觉字体就比较小了，也比较模糊，必须要放大才能看得真切，对于一个普通的Web页面似乎可以接受，但对于一个常用的应用程序就没几个人能够受得了。 　　幸运的是可以使用特殊的Meta元素可视区进行纠正： < meta

1. 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 2. 视口单位vw，vh 视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layout Viewport。 根据CSS3规范，视口单位主要包括以下4个： 1. vw：1vw等于视口宽度的1%。 2. vh：1vh等于视口高度的1%。 3. vmin：选取vw和vh中最小的那个。 4. vmax：选取vw和vh中最大的那个。 vh and vw： 相对于视口的高度和宽度 ，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 3. calc()的使用 calc(expression) 是css3的一个新增的功能，用来指定元素的长度。 calc()能给border、margin、pading、font-size和width等属性设置动态值，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)” calc()使用通用的数学运算规则，但是也提供更智能的功能： 使用“+”、“-”、“*” 和

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？ 在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。 Bootstrap下载 官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建 目录结构： bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├──

rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以 根据屏幕宽度进行自适应 ，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案： 响应式（ Responsive web design ) rem 流式布局 scale伸缩布局 响应式 响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。 rem rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是 通过rem把页面按比例分割 达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。为了方便理解，我写了一个简单的 rem布局demo ，通过设置 document.documentElement.style.fontSize = window.innerWidth + 'px'; 然后设置 <div class="box"></div> 的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。 流式布局 流式布局需要用到百分比或者flex

前言 这个问题之前就遇到过了，参考了很多资料，因为怕改动太多， 后面采取了通过js判断dpr,修改viewport的scale值。 本以为解决了，没想到最近UI提出了安卓手机上线很粗的问题。 我认真回去看了代码，发现确实没注意到。 之前的代码是这样的： ; (function(f, i) { var b = i.documentElement; var e = f.navigator.appVersion; var g = e.match(/android/gi); var c = e.match(/iphone/gi); var k = f.devicePixelRatio; var j = 1, d = 1; if (c) { if (k >= 3) { j = 3 } else { if (k >= 2) { j = 2 } else { j = 1 } } } else { j = 1 } d = 1 / j; var h = i.querySelector('meta[name="viewport"]'); if (!h) { h = i.createElement("meta"); h.setAttribute("name", "viewport"); if (b.firstElementChild) { b.firstElementChild.appendChild

我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。 很多网页都是基于网格设计的，这说明网页是按列来布局的。 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。 为什么是12列呢，因为12可以被2、3、4、6整除，能2、3、4、6等分。 创建网格视图 CSS.css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}* { border: 1px solid red !important;}.row{ width:100%; display: flex; flex-wrap: wrap; text-align: center;}.col-1{ width:8.3%;}.col-2{ width:16.6%;}.col-3{ width:25%; padding: 0.5%;}.col-4{ width:33.33%;}.col-5{ width:41.66%;}.col-6{ width:50%;}.col-7{ width:58.33%;}.col-8{ width:66.66%;}.col-9{ width:75%; padding

3 月，跳不动了？>>> 参考文档：Safari Web Content Guide 首先要弄清楚 三个视口 的概念，分别是：视觉视口、布局视口、理想视口 ##1.视觉视口 就是指用户的可见视野。 ##2.布局视口 或许你不知道'布局视口'这个概念，但是在移动端页面中，你肯定用过下面这行代码。这行代码的作用就是设置布局视口。 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 布局视口主要是针对移动端而言，对于pc端而言，布局视口和视觉视口是一个概念。为什么移动端会分开这两个概念呢？ 移动端的浏览器在显示一个没有针对移动端特殊设计的pc端网页时，如果布局视口还是采用视觉视口，那么空间严重不够。 下图是将一个宽度为980px的网页显示在布局视口分别为320px和980px的浏览器中。在布局视口为980px时，网页刚好显示完整，而在布局视口为320px时(比如在iPhone5下，布局视口采用视觉视口的大小)，只有灰色的方块部分能够显示出来，其他部分均需要用户移动网页才能看见。真是糟糕的体验。 会将网页缩小，方便移动端用户查看。这就是通过改变布局视口实现的，大多数浏览器会把这个视口设置为980px。你可以通过chrome的模拟器查看。

伴随着移动设备的越来越流行，在现代社会中，可能人们手中握着移动设备的时间已经远远大于敲着键盘了，还有各种平板及未来会不断兴起的移动设备，如何让网页在这些设备上更好的显示，成为我们不断学习、思考的问题。 css的媒体查询创建的响应式网站，就是针对这一问题的。 其实在css2已经支持媒体，在新的css3中更加的具体，让我们能够更好的书写代码，以保证网页在不同设备上的布局的合理，使UI显示的更加的精致和优美。下面我们来举个栗子吧： <link mete="not screen and (width:800px)"><!--在宽度不为800px--> <style> @media (max-width:479px){ /*在宽度小于479px,才生效*/ } @media (min-width:480px) and (max-height:767px){ /*在宽度大于480px,小于767px的屏幕里，才生效*/ } @media (min-width:800px) or (orientation:portrait){ /*至少宽度为800px或方向纵向*/ } } </style> 如果只是简单的电脑中缩放显示屏，那么上面的css3已经已经可以很好的满足了，可是我们现在还要考虑一个重要的问题，在手机端显示会不会出现问题。现实证明还是会出现问题，手机的浏览器会默认网页是为宽屏而设计的