移动端web开发——视口
本篇主要是记录一下移动端视口的分类说明和其它的一些知识。在开始之前,先看一个典型的例子:
<meta name="viewport" content="width=device-width,initial-scale=1"> @media screen and (max-width:480px){//宽度不超过480px是的样式 }
上述代码相信大家在做移动端开发时经常去书写。它研究了两个内容:meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的web设计在移动端不同尺寸下的兼容展现。
一、像素
研究视口之前,先说明一下像素。像素是网页布局的基础,web开发者凭直觉使用它。
一个像素就是计算机屏幕能显示一特定颜色的最小区域。
实际上,有以下两种像素
- 设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。
- CSS像素:为Web开发者创造的,在CSS(和JavaScript)中使用的一个抽象的层。
说明一下:web开发过程中,我们基本使用的都是CSS像素,设备像素基本不会用。例如:width:200px 的元素跨越了 200 个CSS像素。CSS像素相当于多少个设备像素取决于屏幕的特性(是否高密度)和用户进行的缩放。当用户放大的越大,一个CSS像素覆盖的设备像素就越多,因此这个元素不一定会跨越css设置等值的设备像素。在旧的屏幕上,当缩放程度为100%时,一个CSS像素等于一个设备像素。在高密度屏幕上,例如苹果的视网膜屏幕,一个CSS像素跨越了多个设备像素。对照下图:
(红色表示CSS像素、蓝色表示设备像素)
我们在开发中,操作的是CSS像素,让CSS像素去覆盖设备像素。不过当我们使用CSS和JavaScript的时候,其实并不会在意一个CSS像素跨越了多少个设备像素。这个依赖于屏幕特性和用户缩放程度的计算由浏览器完成。
二、三个视口
我们经常在开发中会使用到例如width:35%这样的代码去布局。它表示占用父元素的百分比宽度。我们看html文档结构知道最外层的一层是html元素。那么html元素的包含块是什么?这就是要说得视口了。在CSS标准文档中,它被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源。(在桌面上,视口的宽度和浏览器窗口的宽度一致)。
1.布局视口
移动端设备如果使用视口的宽度和浏览器窗口宽度一样会导致很丑陋的结果。想象一下。一个针对桌面级的左右结构页面布局,左侧站浏览器窗口的20%,右侧占80%。这样的页面在我们小屏幕的移动端设备上会缩放的非常小。也许会导致大部分数据重叠覆盖,也可能导致数据遮挡无法显示全部。
所以,移动端浏览器厂商必须保证即使在窄屏幕下我们的页面可以展示的很好,他们将视口的宽度设计得比屏幕宽度宽出很多。这样。在移动端,视口与移动端浏览器屏幕宽度就不再关联,而是完全独立的了。我们称它为 布局视口。CSS布局会根据它来计算并被约束。
看下面的图例,体会一下布局视口
2.视觉视口
虽然独立的布局视口很大程度上帮助了桌面网站过渡到手机上。但我们不能完全忽视移动设备上的屏幕尺寸。所以该说明一下视觉视口了。
视觉视口是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口,同时不会影响布局视口。布局视口还是保持在原来的宽度。
看下图说明一下视觉视口区域
如上图,红色箭头之间的区域就是视觉视口的区域。它和设备的屏幕一样宽,并且它的CSS像素的数量会随着用户缩放而改变。
3.理想视口
布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。如果没有meta视口标签,那么布局将会维持它的默认宽度。
如下代码,告诉浏览器,布局视口的宽度应该与理想视口的宽度一致。(一般来讲我们都会将布局视口的宽度设为设备宽度一样,然后使用css媒体查询编写一套针对移动端的展示方案。)
<meta name="device" content="width=device-width">
定义理想视口是浏览器的工作,不是设备或操作系统的工作。另外,建议大家在书写meta视口时,应向本篇开始时的典型例子那样书写。
三、总结
本篇介绍了css像素和设备像素。开发人员在开发中基本上使用的都是css像素。
介绍了三种视口
布局视口:不再与移动端浏览器相关联,完全是独立的。实际上布局视口的宽度要比屏幕宽出很多。
视觉视口:用户看到的网站展示区域,一般视觉视口和设备宽度一致。并且它的CSS像素的数量会随着用户缩放而改变。
理想视口:为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添写meta视口标签通知浏览器操作。使用它配合css媒体查询制定移动端展示方案。
关于视口这一块内容,只是整理了本人可以理解的部分内容。方便在开发中可以理解一些东西。不过以前学习的时候还介绍了设备像素比之类的判定的诸多内容。因为我在开发中基本没有使用过。所以也就忽略了。还是先搞懂能够懂的东西。如有错误,欢迎指正。
感谢阅读。
转载于:https://www.cnblogs.com/chunyangji/p/5795487.html
移动端web开发——视口相关推荐
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器 二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
- # 移动端web开发
### 概述 随着互联网技术的快速发展,加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要. 移动端Web主要指运行在移动端(手机.ipad)的we ...
- 蓝旭前端开发:GITtomcat+nginx原理移动端web 开发
蓝旭前端开发:GIT+移动端 web 开发 目录 一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...
- 移动端WEB开发——响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 设备划分 尺寸区间 超 ...
- 移动端Web开发 基础知识
文章目录 移动端Web开发 移动端基础 浏览器 视口 样式编写 分辨率和设备像素比 二倍图 SVG矢量图 移动端Web开发 移动Web开发的两种主流方案,一种是单独制作移动端页面,另一种是制作响应式页 ...
- 前端移动端web开发(一)
一.前端开发 1.前端开发分类: PC端开发:页面主要运行在PC端浏览器中 移动端开发:页面主要运行在手机上 移动web开发 在移动端表现良好的页面,如新浪网 混合式开发(Hybrid App) 也叫 ...
- 移动端 Web 开发
(八)移动端 Web 开发 1. 移动端基础 1.1 浏览器现状 PC端常见浏览器 360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器 UC浏览器 ...
- 移动端web开发学习归纳
1.视口 视口分为三种视口,分别是布局视口,视觉视口和理想视口. 布局视口(layout viewport): 大部分移动端默认有一个布局视口,用于解决早些时候pc端界面在手机上的显示问题,这个视口通 ...
最新文章
- 在SaaS领域,单纯的免费策略根本行不通!
- UVa 10148 - Advertisement
- 一个模型通杀8大视觉任务,一句话生成图像、视频、P图、视频处理...都能行 | MSRA北大出品...
- 如何排查系统的性能瓶颈点?
- Halcon初学者知识【17】如何将零件提取dxf图
- JSON在PHP中的基本应用
- E:K-periodic Garland(DP)
- Linux下显示当前目录下的全部目录或文件
- templates(0.1)
- python对excel增删改查语句_利用python模拟sql语句对员工表格进行增删改查
- (推荐)jQuery性能优化指南
- Chrome 大版本更新来了,这是一次「史诗级」增强
- 谷歌小恐龙PHP代码,Chrome小恐龙前端修改代码代码总结
- matlab怎么画隐函数图像,matlab中如何画隐函数的图像
- 不论微信钉钉还是什么软件,我写了个通用的消息监控处理机器人
- Python画美队盾牌
- 浅析我对Web(淘宝网)导航栏的深入理解
- java常量final是什么_java:变量,常量和final关键字--基础篇
- P2P想借壳上市?只能看命了
- 第二章计算机网络答案,计算机网络第二章作业参考答案
热门文章
- mysql procedure
- Tensorflow CTPN
- 1.10 梯度消失与梯度爆炸
- Pandas 列索引操作
- list怎么取数据_MongoDB 自动过滤重复数据
- python中文转拼音不用第三方库_又一个奇葩要求,Python是如何将“中文”转“拼音”的?...
- VSAN 个版本对应vSphere版本
- Maven学习总结(18)——深入理解Maven仓库
- php键名相加,php二维数组相同键名相加实例
- asp.net下url参数含有中文读取后为乱码