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

划重点 手机屏幕相对着桌面浏览器小,传统网页的设计在手机上体验糟糕 Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(layout viewport),这个虚拟窗口的分辨率接近于桌面显示器,Apple将其定义为980px.然后将虚拟窗口映射到移动设备的屏幕上,按比例缩放并重新渲染网页. 虚拟窗口layout viewport 移动浏览器默认情况下把 viewport 设置为一个比较宽的值(防止太窄而在可视区域中显示错乱…

viewport默认有6个属性 width: 设置viewport的宽度(即之前所提及到的,浏览器的宽度详),这里可以为一个整数,又或者是字符串"width-device" initial-scale: 页面初始的缩放值,为数字,可以是小数 minimum-scale: 允许用户的最小缩放值,为数字,可以是小数 maximum-scale: 允许用户的最大缩放值,为数字,可以是小数 height: 设置viewport的高度(我们一般而言并不能用到) user-scalable: 是否…

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 但是这个可能不会太精准,比如我的设备布局viewport可能是370px,这样只能使用320这一版本.而事实上,他们的viewport并不相同,所以他们的布局也得不一样.也就是说我们如果用css媒体查询只能说是可以用,但不是最佳实践.其实通过看某些牛逼的移动端网站,可以看到他们的共同点,他们都是使用…

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

viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户缩放no/yes(iOS10不支持 近乎无解) initial-scale 初始缩放比例 minimum-scale 最小缩放比例 maximum-scale 最大缩放比例 页面宽度 页面宽度=device-width/scale 在页面中实现等比像素的JS代码: <!--利用页面的像素比来进行页面…

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

流式布局 百分比布局,非固定宽度,内容向两边填充,流动的布局. viewport(视口) PC端的网页在手机端的浏览器显示是不会出现网页的,这是因为移动端的网页不是直接放在移动端的浏览器中,而是放在移动端的一个虚拟区域中,这个虚拟区域叫做viewport(视觉窗口,视口,视口的宽度一般默认比浏览器宽度大),然后视口进行相应的缩放,最后将视口放在浏览器中. 适配方案 因为viewport默认会进行缩放,所以网页在移动端显示的对用户不友好,所以我们需要进行一些配置来使网页在移动端显示得和pc端一样.…

1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = "viewport"  content = “ width = device-width,user-scalable = no,initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0” width:宽度设置的是 viewpor…

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