本篇主要是记录一下移动端视口的分类说明和其它的一些知识。在开始之前，先看一个典型的例子： 上述代码相信大家在做移动端开发时经常去书写。它研究了两个内容：meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的web设计在移动端 ...

（结论在最后面） 首先说明，一般视口标签完整写法：<meta name="viewport" content="width=device-width",initial-scale=1, maximum-scale=1,user-scable=no/> 那么为啥移动端要加个视口标签 ...

移动端开发中，有一些基本概念需要理解清楚，才能更好的组织编程逻辑。在刚接触时，移动端视口的缩放和rem单位的缩放搞混淆了，弄得自己很蒙圈。所以仔细总结下自己的理解。 移动端的适配，我理解为两点： 第一点就是视口的缩放配置，牵扯出视口和像素等概念。目的是为让我们的CSS样式中逻辑像素匹配 ...

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。 而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口 ...

一、viewport视口 　　在移动端，viewport视口就是浏览器显示页面内容的屏幕区域。 　　viewport视口有两种视口，分别是 visual viewport(可视视口)和layout viewport(布局视口)： 　　　　（1）visual viewport固定大小跟屏幕大小相同 ...

结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大小假如是font-size:20px,但是一换到手机上的时候显示字体就会变得 ...

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备 ...

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备 ...