CSS之viewports剖析

1.设备的pixels和CSS的pixels

首先你应当理解CSS的pixels，以及它和设备的pixels的区别

我们姑且认定设备的pixels为标准的pixels宽度。这些pixels决定了你工作所用的那些设备上正式的分辨率。在大多数情况下，能够从screen.width/height上取出具体值

如果用户缩放（zoom）了浏览器，当然必须改变计算方式。例如用户缩放了200%，上诉显示器只能横排容纳4个上诉元素了

现代浏览器上的缩放的结果是，html元素上的宽度并没有因为缩放200%而由128pix变成256px，而是真实的pixels的被计算成了双倍。html元素在形式上依然是128CSS的pixels，即便它占用了256设备的pixels

换言之，缩放200%将一个单位的CSS的pixels变成了4倍的设备的pixels那么大，即宽度 * 2、高度 * 2，面积扩大了2 * 2

下列图片将清楚的解释这个概念。如图1-1.有4个1像素，缩放为100%的html元素，CSS的pixels完整的和设备的pixels重叠

这里写图片描述

当我们缩小浏览器时，CSS的pixels开始收缩，导致1单位的设备的pixels上容纳了多个CSS的pixels

这里写图片描述

同理，放大浏览器时，相反的事情发生了，CSS的pixels开始扩大，导致1单位的CSS的pixels上容纳了多个设备的pixels

这里写图片描述

总体而言，你只需要关注CSS的pixels，这些pixels指定你的样式被如何渲染

2.100% 缩放

在缩放级别为100%时，1单位的CSS的pixel是严格相等于1单位的设备pixel

在桌面系统上，你通常会在100%缩放级别下测试你的网站，但即便用户缩放，CSS的pixels的魔法依然能保证你网站外观保存相同的比例

3.屏幕尺寸 Screen size

screen.width/height：用户的屏幕的完整大小

我们先了解一些特殊的尺寸：screen.width 和 screen.height。这两个属性包含了用户屏幕的完整宽度高度。这些尺寸使用设备的pixels来定义，他们的值不会因为缩放而改变：他们是显示器的特征，而不是浏览器

这里写图片描述

4.浏览器尺寸 Window size

window.innerWidth/Height：包含滚动条尺寸的浏览器完整尺寸

你想要知道的浏览器的内部尺寸。它定义了当前用户有多大区域，可供你的CSS布局占用。你可以通过window.innerWidth 和 window.innerHeight来获取

这里写图片描述

5.滚动移位 Scrolling offset

window.pageX/YOffset：页面的移位

window.pageXOffset 和 window.pageYOffset，定义了页面(document)的相对于窗口原点的水平、垂直位移。因此你能够定位用户滚动了多少的滚动条距离

这里写图片描述

原理上来说，在用户放大浏览器时，向上滚动了页面，window.pageX/YOffset会改变。但当用户放大页面时，浏览器会尝试着保存用户当前可见的页面的元素依然在可见位置。虽然该特性表现得不如预期，但它意味着：在理论上 该情况下 window.pageX/YOffset并没有改变，被用户滚出屏幕的CSS的pixels几乎保存不变

6.视窗 viewport

viewport的功能在于控制你网站的最高块状（block）容器：<html>元素

听起来有点玄乎，举个例子~假设你定义了一个可变尺寸的布局（liquid layout），且你定义一个侧边栏的宽度为width: 10%。当你改变浏览器窗口大小时，该侧边栏会自动扩张和收缩。这是什么原理呢？

那么异常情况就是父元素的宽度究竟是多少？通常，一个块级元素占有起父元素的100%的宽度（这里如果有异常情况，暂时忽略）。所以的宽度就是其父元素<html>的宽度

那么<html>元素到底有多宽？因为它的宽度恰好为浏览器的宽度。所以你的侧边栏宽度width: 10%会占用10%的浏览器宽度。所以的web开发人员都直观的知道和使用该特性了。 但是你也许不知道原理。在原理上，<html>的宽度受viewport所限制，<html>元素为viewport宽度的100%

反过来，viewport是严格的等于浏览器的窗口：定义就是如此。viewport不是一个HTML的概念，所以你不能通过CSS修改它。它就是为浏览器窗口的宽度高度 – 在桌面浏览器上如此，移动设备浏览器上有点复杂

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/407399.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

9个好用的搜索小技巧

9个好用的搜索小技巧

百度一下&#xff0c;你就知道。搜索是我们常用的工具&#xff0c;怎么又快又准的搜索出想要的结果是现代人必备的技能&#xff0c;下面就教你9个好用的搜索小技巧吧 1 . 完全匹配搜索。 在查询词的外边加上双引号“”。 如 “北京地坛” &#xff0c;注意引号是不分中英文的…
阅读更多...
javascript学习系列(11):数组中的findIndex方法

javascript学习系列(11):数组中的findIndex方法

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1前言 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说f…
阅读更多...
CSS之基于视窗单位的排版

CSS之基于视窗单位的排版

1.使用视窗单位进行排版 这里还有一个为什么要考虑使用视窗单位进行排版的原因 - 根据客户端的浏览器&#xff0c;视窗单位会自动重新计算。这就意味着我们不需要显式声明媒体查询的字体大小 实例1&#xff1a;让我们用一个例子清楚地说明这一点 考虑下面的代码&#xff0c;…
阅读更多...
React开发（111）:写注释的方法

React开发（111）:写注释的方法

放上去会显示(method) Template.getDictionary(): void
阅读更多...
数据库范式（1NF 2NF 3NF BCNF）详解

数据库范式（1NF 2NF 3NF BCNF）详解

数据库的设计范式是数据库设计所需要满足的规范&#xff0c;满足这些规范的数据库是简洁的、结构明晰的&#xff0c;同时&#xff0c;不会发生插入&#xff08;insert&#xff09;、删除&#xff08;delete&#xff09;和更新&#xff08;update&#xff09;操作异常。反之则是…
阅读更多...
再学 GDI+[98]: TGPImage(18) - 获取 GDI+ 图像格式对应的 GUID

再学 GDI+[98]: TGPImage(18) - 获取 GDI+ 图像格式对应的 GUID

和在 Net 中不同的是, 在具体指定图像格式时, 这里常常需要的不是格式名称, 而是格式的 GUID;知道了格式名称, 用 GetEncoderClsid 函数可以获取格式的 GUID;GetEncoderClsid 函数来自 GDIPUTIL 单元, 本例并没有用到前面一直不可或缺的 GDIPOBJ、GDIPAPI 单元.如果要获取 imag…
阅读更多...
JS之连接数组方法concat

JS之连接数组方法concat

作用&#xff1a;用于连接两个或多个数组&#xff0c;该方法不会改变现有的数组&#xff0c;而仅仅会返回被连接数组的一个副本 语法&#xff1a;arrayObject.concat(arrayX,arrayX,……,arrayX) 参数&#xff1a;arrayX&#xff0c;必需。该参数可以是具体的值&#xff0c;也…
阅读更多...
React开发（112）:不要写多余的select

React开发（112）:不要写多余的select

阅读更多...
微信小程序：生命周期

微信小程序：生命周期

下面从三个方面来介绍小程序的生命周期&#xff1a; &#xff08;1&#xff09;应用生命周期 &#xff08;2&#xff09;页面生命周期 &#xff08;3&#xff09;应用及页面生命周期的触发顺序 1.应用生命周期 App() 必须在 app.js 中调用&#xff0c;必须调用且只能调用一次…
阅读更多...
在.NET3.5平台上使用LinQ to SQL + NBear 创建三层WEB应用

在.NET3.5平台上使用LinQ to SQL + NBear 创建三层WEB应用

看了《一步一步学Linq to sql》和《在.NET 3.5 平台上使用LINQ to SQL创建三层/多层Web应用系统》 这两个系列文章后,因为一直使用NBear,所以试着综合了一下主要用NBear.IOC其它的NBear.data里的就没有会了,相应的使用LINQ来做数据处理. 之前一直使用NBear做些WEB应用主要感觉N…
阅读更多...
JS之字符串连接方法join

JS之字符串连接方法join

作用&#xff1a;join() 方法用于把数组中的所有元素放入一个字符串&#xff0c;元素是通过指定的分隔符进行分隔的。&#xff08;作用和split正好相反&#xff09; 语法&#xff1a;arrayObject.join(separator) 参数&#xff1a;可选。指定要使用的分隔符。如果省略该参数&…
阅读更多...
前端学习（3288）：object.define

前端学习（3288）：object.define

阅读更多...
前端学习（3289）：object.define2

前端学习（3289）：object.define2

阅读更多...
JS之颠倒数组元素的reverse方法

JS之颠倒数组元素的reverse方法

作用&#xff1a;reverse() 方法用于颠倒数组中元素的顺序 语法&#xff1a;arrayObject.reverse() 注意&#xff1a;该方法会改变原来的数组&#xff0c;而不会创建新的数组 实例1&#xff1a;
阅读更多...
图文：详解数据库Oracle 11g的基本安装

图文：详解数据库Oracle 11g的基本安装

From: http://blog.csdn.net/wjcreator123/article/details/3243041 下面提供的是Oracle 11g的下载地址和基本安装过程&#xff08;仅作参考&#xff09; 第一步&#xff1a; oracle服务端下载: http://down.zdnet.com.cn/detail/9/82225.shtml 客户端: http://blog.csdn.net…
阅读更多...
mysql数据库中查看当前使用的数据库是哪个数据库？

mysql数据库中查看当前使用的数据库是哪个数据库？

一、用select database()语句 语句 mysql > select database();结果 解释&#xff1a;表示的是当前使用的是哪个数据库或者说会话登录到了哪个数据库中。 二、用show tables语句 语句 mysql > show tables;结果 解释&#xff1a;查询出来的结果中&#xff0c;第一行…
阅读更多...
前端学习（3290）：object.define3

前端学习（3290）：object.define3

阅读更多...
JS之返回数组指定元素的slice

JS之返回数组指定元素的slice

作用&#xff1a;slice() 方法可从已有的数组中返回选定的元素 语法&#xff1a;arrayObject.slice(start,end) 参数1&#xff1a;必需。规定从何处开始选取。如果是负数&#xff0c;那么它规定从数组尾部开始算起的位置。也就是说&#xff0c;-1 指最后一个元素&#xff0c;…
阅读更多...
使用 ADO.NET 的 NextResult 方法取得多个 Result Set

使用 ADO.NET 的 NextResult 方法取得多个 Result Set

(本帖在版工的旧 Blog 中&#xff0c;发表日期为 2007/04/06) (本帖有些 Hyperlink 是连到台湾的网站&#xff0c;若无法连结&#xff0c;麻烦请留言反应)从 ADO.NET 1.x 开始&#xff0c;DataReader 就可以在单一次的查询动作中&#xff0c;「批次 (batch)」读取 T-SQL 语句以…
阅读更多...
JS之数组删除/添加项目方法splice

JS之数组删除/添加项目方法splice

用法&#xff1a;splice() 方法向/从数组中添加/删除项目&#xff0c;然后返回被删除的项目 注:1&#xff1a;该方法会改变原始数组 语法&#xff1a;arrayObject.splice(index,howmany,item1,…..,itemX) 参数1&#xff1a;必需。整数&#xff0c;规定添加/删除项目的位置&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023