文档章节

PC端的viewport

 金于虎
发布于 2016/10/27 11:49
字数 425
阅读 144
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

##视口

视口(viewport)的作用是限制<html>元素,<html>元素是所有网页块元素中最高一级的元素。

一个实际的例子。 假设在一个流式布局中,你其中一个边栏的宽度是10%。现在当你改变浏览器宽度时,边栏会一致的缩放。

那么问题来了,他究竟是如何工作? 原理上说,当你给sidebar一个10%的宽度,实际上它获得了父级宽度的10%。

让我们来考察一下(你并没有设定宽度的)body元素。

那么问题来了,body元素的宽度是多少?

通常,所有块级元素的宽度都会等于父元素(这里有些特例,但不要在意细节)。所以<body>元素与其父级<html>元素等宽 element。

那么<html>元素的宽度又如何?为何他与浏览器窗口等宽?由于与浏览器窗口等宽,这也就是为什么你设置边栏宽度为10%他就占据了整个浏览器宽度的10%

。这是一条所有的web开发人员感性上认可并使用的原理。 你不知道的只是在理论上,这条原理如何实现。 理论上,<html>元素的宽度被视口限制 。 而<html>元素占据了100%的视口宽度的。 视口宽度又正好等于浏览器宽度:就是这么定义的。 视口并非一个HTML结构,其不受CSS控制。 在桌面端,其与浏览器窗口长宽一致。但在移动端情况略微复杂。

body的宽度=html的宽度=视口宽度=浏览器宽度 设备的宽度

http://www.tuicool.com/articles/ZB32Ivi

http://weizhifeng.net/viewports2.html

© 著作权归作者所有

粉丝 1
博文 112
码字总数 46834
作品 0
曲靖
私信 提问
移动端开发之viewport

参考了很多资料,说说自己对viewport的理解 viewport分visual viewport和layout viewport,visual viewport可以理解为移动设备屏幕的可视区域,visual viewport的大小可以理解为就是品目可视...

LorinLuo
2016/10/14
62
0
viewport1

PC页面到手机页面 一个很大的pc页面如何在手机上显示 浏览器窗口变化大小: 页面 出现滚动条,页面需要拖滚动条才可以看完成 手机设备上 页面完全显示,没有出现横向滚动条,但字体很小,看不...

金于虎
2016/10/27
10
0
理解flexible.js所需的viewport知识

viewport探索 flexible.js解读 http://www.quirksmode.org/mob... http://www.quirksmode.org/mob... http://www.quirksmode.org/mob... http://www.w3cplus.com/mobile... 这在这篇文章介绍......

呵呵闯
2018/08/30
51
0
掌握移动web开发基础系列--viewport

掌握web开发基础系列--长度单位 掌握web开发基础系列--物理像素、逻辑像素、css像素 思考一下 你知道HTML 标签的作用吗? 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎...

上古神鹏
05/09
0
0
关于手机端显示页面一个像素的边框变粗的问题

正常的页面设置了<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1"> 之后 手机端的border细线 及时设置了1px的宽度也会虚化变宽。 如......

lilugirl
2015/09/21
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

003-ES集群

ES 集群 详情: https://my.oschina.net/u/3635512/blog/3140294 将实验机器/etc/elasticsearch/elasticsearch.yml 中配置文件改为 cluster.name: myes   #ES集群名称node.name:......

伟大源于勇敢的开始
24分钟前
6
0
法国电力项目二期正式验收

2019年12月10日, 法国电力项目二期正式验收 并就未来的合作技术方向进行了探讨: 去中心化数据存储/搜索引擎 可信计算/零知识证明 能源虚拟机改造 出席的人有: 法国电力总部 CIO&CTO Step...

怎当她临去时秋波那一转
39分钟前
3
0
谷歌助手

参照: https://www.mxblog.com.cn/mac%E7%89%88chrome%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%89%E8%A3%85%E8%B0%B7%E6%AD%8C%E8%AE%BF%E9%97%AE%E5%8A%A9%E6%89%8B.html......

T型人才追梦者
48分钟前
6
0
索引延迟关联

前言 今天在看代码的时候学习到了一种索引的优化,就先在此记录下来。 具体 举个例子,原sql如下: SELECT * FROM TABLE WHERE INDEX = '' LIMIT 10000, 10; 现象 就算INDEX用了查询索引,...

无敌小杰杰
今天
6
0
tomcat_jdk安装,安装zrlog,nginx代理tomcat,第二个java应用

tomcat_jdk安装 要跑tomcat 首先要安装 jdk jdk 有两个版本 一个是 open jdk,一个是 oracle jdk open jdk 是 oracle jdk 的开源版本 两个版本都可以使用 这次实验先使用 open jdk 来做 如果...

doomcat
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部