screen是设备的屏幕对象，理论上，当一个设备固定之后，那么这个设备的屏幕的可视宽度和高度也是固定的
windowinnerWidth，windowinnerHeight，documentdocumentElementclientWidth，documentdocumentElementclientHeight这几个属性，是取的浏览器内部的可视宽高（移动设备下为移动设备可视区域的宽高减去手机状态栏、浏览器控制栏），即浏览器一屏的宽高。
documentbodyclientWidth、documentbodyclientHeight。有滚动条情况下，包含滚动内容的高度。
documentbody返回出来的是html 中 body 节点；documentdocumentElement返回的是 html 根节点。
<!DOCTYPE>模式下，如果不设置html,body{height:100%;}且出现滚动条的情况下，
documentdocumentElementclientHeight与documentbodyclientHeight的值一般是不同的
documentbodyclientWidth => BODY对象宽度
documentbodyclientHeight => BODY对象高度
documentdocumentElementclientWidth => 可见区域宽度
documentdocumentElementclientHeight => 可见区域高度
设置html,body{height:100%;}后，documentbodyclientHeight与documentdocumentElementclientHeight值相同，为documentdocumentElementclientHeight的值。
浏览器相对于显示屏的位置，即document 在screen的某个位置
除了 Internet Explorer外，所有主要浏览器都支持screenX和screenY属性。
注意： IE浏览器使用。 "windowscreenLeft" 和 "windowscreenTop"获得相同的值
1、纯PC端布局：
（1）通常以固定宽度布局，常见的宽度范围 950 - 1200
以width设置固定宽度，并居中。
（2）流式布局，宽度设置百分比配合max-width 、 min-width
以width设置百分比宽度来快速实现宽度自适应
2、纯移动端布局：
（1）rem / em，将宽和高从固定px到相对rem，实现屏幕自适应等比变化
（2）d性盒子
（3）怪异盒模型
现如今大多数网站都存在PC和移动的双端显示，PC和移动会切换显示
需要检测屏幕宽度的变化，在不同宽度渲染不同的布局和样式。
（1）媒体查询，根据给出的媒体类型为条件，来检测设备宽度的变化
常见媒体类型：
1 screen，屏幕
常见的设计规范下的屏幕尺寸范围
（1）width < 768px 超小屏幕，手机屏幕
（2）width < 992px 小屏幕，平板（ipad）
（3）width < 1200px 大屏幕，桌面屏幕
（4）width ≥ 1200px 超大屏幕，大型的桌面屏幕
例如：壁纸网页
1 在PC设备上，一行可显示4张壁纸
2 在移动设备上
（1）ipad上，一行显示2张壁纸
（2）手机上，一行显示1张壁纸
（2）js的resize事件动态监听window窗口尺寸变化
1、媒体查询：实现在不同设备宽度下渲染不同布局和样式
2、媒体查询的语法:
（1）media：表示媒体
（2）screen：表示媒体类型设置为屏幕类型
（3）and：连接媒体类型和查询条件，左右两侧必须有空格
（4）width：规定固定的屏幕宽度
（5）min-width：规定屏幕的最小宽度，当屏幕宽度大于min-width时
（6）max-width：规定屏幕的最大宽度，当屏幕宽度小于max-width时
1、引入方式：
（1）通过link标签的media属性来规定媒体类型和查询条件，在条件符合的情况下引入对应的外联css文件
（2） 通过为style设置媒体类型及查询条件，来渲染不同条件下的不同style标签内的样式
设置方式与link标签的media相同
（3）在style标签中，声明媒体类型及查询条件，当条件符合时样式会覆盖默认样式
语法：
@media 媒体类型 and 查询条件 {
选择器{
符合查询条件的样式
}
}
注意：媒体查询一定要写在默认样式之后。
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是35英寸的。
px：像素
em：一个 M 的宽度（面试：一个字的宽度）
rem：root em 根元素（ <html> ）的 font-size //oppo个别机型不适用
vh：view height，视口高度 100vh === 视口高度
vw：view width，视口宽度 100vw === 视口宽度
浏览器默认 font-size:16px;
Chrome浏览器默认最小字号为12px：font-size:12px;
所以一般情况下，rem 的font-size不要小于12px;
rem 就是 <html> 元素的 font-size，默认为 16px;(浏览器默认font-size)
rem和em 的区别：
1meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2媒体查询
更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例
<style>
@media (max-width: 500px) {
}
</style>
3动态 rem方案
一切单位以屏幕宽度为标准，就能完美还原设计稿。
动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。
在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。
documentdocumentElementclientWidth/clientHeight来获取布局视口
windowinnerWidth/innerHeight来获取视觉视口大小
screenwidth/height来获取理想视口大小
在PC端 用户缩放会改变布局视口和视觉视口
在移动端 用户缩放不会改变布局视口，只会改变视觉视口
>
以上就是关于浏览器宽高的解析全部的内容，包括:浏览器宽高的解析、7、响应式布局（媒体查询）、移动端web在设计时宽度尺寸是多少合适等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）