× 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源,它给CSS布局限制了一个最大宽度.在桌面上,视口的宽度和浏览器窗口的宽度一致.而在移动端,视口分为布局视口(layout viewport).视觉视口(visual viewport)和理想视口(ideal viewport) 布局视口 移动端设备的问题是,如果使视口的宽度和浏览器窗口宽度一样会导…

结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大小假如是font-size:20px,但是一换到手机上的时候显示字体就会变得过小,这是因为viewport的关系. viewport概念:决定一个屏幕能够显示的最大布局宽度,如果一个ipone6手机的可视视图为375像素,但让它的布局宽度以960px去显示就会适当的缩小整体布局来容纳可视视图,也就是…

移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一点就是视口的缩放配置,牵扯出视口和像素等概念.目的是为让我们的CSS样式中逻辑像素匹配到手机终端的物理像素,让网页视图适合手机屏幕.虽然在代码中只是一个语句就解决的问题,但要理解它,要弄懂很多概念.<关于像素Pixel历史的详解看下一篇文档> 第二点就是rem单位的使用,目的是为了我们只需要一份代…

转载链接:移动端开发中,关于适配问题的一点总结(一) 视口 布局视口layout viewport 视觉视口visual viewport 理想视口 缩放 一个重大区别 最小缩放 和最大缩放 分辨率 物理分辨率dpi 设备像素比 dpr dipsdevice-independent pixels 例子 meta视口 完美的meta 视口 视口 <meta name="viewport" content="width=device-width"/> 我们一…

一.viewport 1. 何为视口? 视口是浏览器显示网页的矩形区域. 2. 默认视口:模拟一个大约1000像素宽的视口. 理想视口:因设备.操作系统.浏览器而异,一般而言,手机宽带大约在300-500像素之间(iphone 5宽度320像素),平板宽度在800-1400像素 可见视口:浏览器窗口减掉所有按钮.工作条.滚动条等组件之后,实际包含网页内容的空间. 布局视口:放大网页后某些部分会跑到可见视口之外.我们看到的那部分为可见视口,而假想的约束“整个页面”的矩形区为布局视口. <meta…

一.预备知识 1.窗口是基于逻辑坐标的. 2.视口是基于设备坐标. 3.设备坐标是以像素为单位的,逻辑坐标是以.cm,m,mm,..... 4.系统最后一定要把逻辑坐标变为设备坐标. 5.设备坐标有3种: a.客户区域坐标,包括应用程序的客户区域,客户区域的左上角为(0, 0).   b.屏幕坐标,包括整个屏幕,屏幕的左上角为(0, 0).屏幕坐标用在WM_MOVE消息中(对于非子窗口)以及下面的Windows 函数中:CreateWindow 和MoveWindow(都对于非子窗口).GetM…

当我们的浏览器在窗口最大化的时候,此时屏幕的宽度,就是我们桌面的分辨率.这个规则仅仅适用于PC! 我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980!居然和PC屏幕差不多大! 苹果主导的这些手机厂商,为了使用户获得完整web体验(就是让用户在手机屏幕上,也能够看见完整的PC网页), 就大部分设备都会欺骗浏览器返回一个数值较大的“视口”(viewport),告诉浏览器,别以为我身子小, 但是我想以980px宽度来显示这个页面. iPhone的分辨率1136*640,三星Note3的分辨…

每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不是按照这个像素宽度做的,你们出来的效果就会不尽如人意了. 什么是视口(viewport)?为了手机能获得良好的网页浏览体验,Apple在移动版的Safari中引入了viewport meta标签,他的作用就是创建一个虚拟的视口,而这个虚拟窗口的分辨率接近于桌面显示器,Apple将其默认为980px,…

测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '<br/>'); } 一.尺寸 在container外面我还套了个container_out,宽度为1000px,方便演示用,HTML代码如下: <div class="container_out"> <div id="container"&g…

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻译自W3C官方文档,其中加上了自己的一些理解.相关链接:https://www.w3.org/TR/CSS2/visuren.html#block-boxes. 1.可替换元素(Replaced element) 下面的一段话引自MDN: 典型的可替换元素有 <img>. <object&g…