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;注意引号是不分中英文的…
阅读更多...
raw_input() 与 input() __ Python

raw_input() 与 input() __ Python

>>> input ("my age is : ") my age is :23 23 >>> raw_input("my age is : ") my age is : 23 23 有什么不一样&#xff1f;再看一个例子 >>> age input(" how old r u ?") how old r u ?23 >>> p…
阅读更多...
javascript学习系列(11):数组中的findIndex方法

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

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

系统监控

SAP系统监控在生产系统中&#xff0c;我们要根据实际需要来进行实时监控系统&#xff0c;目的是为了保证系统的平稳运行在ERP系统中&#xff0c;我们的生产系统会部署在各个服务器节点上&#xff0c;每台服务器对应的客户端节点又有很多个尤其是在系统压力比较大的时候&#xf…
阅读更多...
PKU 1061 青蛙的约会

PKU 1061 青蛙的约会

/*扩展欧几里德求模线性方程 感谢logic_space的指正*/#include <iostream>#defineabs(a) ((a)<0?-(a):(a))usingnamespacestd; __int64 exGCD(__int64 a, __int64 b, __int64 &x, __int64 &y) { if(b 0) { x 1; y 0; return…
阅读更多...
小程序根据手机机型设置自定义底部导航距离

小程序根据手机机型设置自定义底部导航距离

需求: iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置. 解决: //app.js App({/*** 当小程序初始化完成时&#xff0c;会触发 onLaunch&#xff08;全局只触发一次&#xff09;*/onLaunch: function() {var that this;//获取手机型号…
阅读更多...
CSS之基于视窗单位的排版

CSS之基于视窗单位的排版

1.使用视窗单位进行排版 这里还有一个为什么要考虑使用视窗单位进行排版的原因 - 根据客户端的浏览器&#xff0c;视窗单位会自动重新计算。这就意味着我们不需要显式声明媒体查询的字体大小 实例1&#xff1a;让我们用一个例子清楚地说明这一点 考虑下面的代码&#xff0c;…
阅读更多...
C++ STL 遍历 map 的时候如何删除其中的 element

C++ STL 遍历 map 的时候如何删除其中的 element

首先看一段他人的一段文章&#xff1a;from: http://www.cnblogs.com/super119/archive/2011/10/11/2207541.html 我们通过map的erase(iterator it)方法删除元素的时候&#xff0c;如果此时erase处于遍历map的代码中&#xff0c;那么调用erase就需要小心一些。因为erase会导致…
阅读更多...
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;操作异常。反之则是…
阅读更多...
小程序页面跳转的几个方法和区别

小程序页面跳转的几个方法和区别

目前小程序的几个页面跳转方式的主要区别就两点&#xff1a; 1.是否可以返回上一个页面2.目标页面是否是tabBar 两个通用属性 1.限制&#xff1a;目前页面路径最多只能十层。2.分类&#xff1a;wx.navigateTo 和 wx.redirectTo不允许跳转到 tabbar 页面&#xff0c;只能用 w…
阅读更多...
再学 GDI+[98]: TGPImage(18) - 获取 GDI+ 图像格式对应的 GUID

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

和在 Net 中不同的是, 在具体指定图像格式时, 这里常常需要的不是格式名称, 而是格式的 GUID;知道了格式名称, 用 GetEncoderClsid 函数可以获取格式的 GUID;GetEncoderClsid 函数来自 GDIPUTIL 单元, 本例并没有用到前面一直不可或缺的 GDIPOBJ、GDIPAPI 单元.如果要获取 imag…
阅读更多...
STL::map默认会按照.first的字母顺序排列

STL::map默认会按照.first的字母顺序排列

看个代码&#xff1a; // map默认会按照.first的字母顺序排列#include <map>#include <string>#include <iostream>using namespace std;int main(){map<string, string> map1;map<string, string>::iterator mapit;map<string, string>:…
阅读更多...
JS之连接数组方法concat

JS之连接数组方法concat

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

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

阅读更多...
configure: error: Curl library not foun

configure: error: Curl library not foun

yum -y install curl-devel 转载于:https://www.cnblogs.com/lehao/p/3903189.html
阅读更多...
微信小程序：生命周期

微信小程序：生命周期

下面从三个方面来介绍小程序的生命周期&#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…
阅读更多...
递归修改子目录及文件的权限

递归修改子目录及文件的权限

背景&#xff1a;当我们的虚拟机和windows系统共享windows上的一个目录(记为&#xff1a;A)时&#xff0c;把该目录下的目录(记为B)移动(mv)到linux下的任意目录下&#xff0c;这个目录B及下面的子目录或文件的权限都是rwx(777)&#xff0c;这是他们在windows下的权限。因此用l…
阅读更多...
JS之字符串连接方法join

JS之字符串连接方法join

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

Copyright @ 2022~2023