设备划分

pc端大屏 > 1200px

超小屏 :phone 320px-750px

小屏; pad 768px-1024px

中屏: 992px-1200px

视口

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，比如布局视口开始为了在手机上展示pc端页面就设置为980px的宽度.

2个视口总结如下：

layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，宽度一般为980px。
ideal viewport(理想视口)：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。
利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">device-width设备宽度  width=device-width   视口宽度= 设备宽度
```
逻辑像素和物理像素

物理像素: 生活当中

逻辑像素（设备独立像素）: css像素写代码

pc端 1物理像素=1逻辑像素 1980px分辨率 css宽度=1980px

移动端 1物理像素=n*1逻辑像素

分辨率:ppi

手机尺寸:对角线长度(英寸)

pc 端: 1物理= 1逻辑 = 1csspx 倍率= 物理像素/逻辑像素

移动端: 1逻辑像素 = 1css像素

二倍图技术

为了保证图片在移动端的正常展示,我们需要2倍图才能正常呈现 ,也就是说我们的图片比我们插入图片的盒子宽高要大两倍

所以写代码时我们要将图片缩小2倍再插入到盒子里才能保证图片不失真.

background-size:图片/2px  图片/2px;
background-position: xpx/2 ypx/2;

屏幕宽度获取

h5媒体查询

（1）查询的设备 print 打印机 or screen屏幕

(2) 查询的条件 width设备宽度 height设备高度 min-width 最小宽度 max-width:最大宽度

注意: 满足css选择器的优先级！！！！

@media  设备类型   and  (查询条件)  {//代码  只有查询条件被满足才会执行这里的代码
}设备类型:  screen设备屏幕      print 打印机@media   screen   and  (width:414px) {.box {baclground-color:red;}}
@media   screen   and  (min-width:414px) {//大于等于 414px 宽度的屏幕.box {baclground-color:yellow;}}
@media   screen   and  (max-width:992px) {//小于等于 992px 宽度的屏幕.box {baclground-color:blue;}}992px ---1200px 需求
@media   screen   and  (max-width:1200px)  and  (min-wdith:992px ){//小于等于 992px 宽度的屏幕.box {baclground-color:orange;}}

js获取视口的宽度

var screenWidth = document.documentElement.clientWidth;

// 当前屏幕宽度对应的html字体大小=当前屏幕宽度*设计稿下预设置的html字体大小/设计稿的宽度！！！//当前屏幕的宽度 js方法获取当前屏幕宽度
var currSreenWidth = document.documentElement.clientWidth;if( currSreenWidth>750){currSreenWidth=750;
}
//设计稿下预设置的html字体大小 为了好算 100px
var prevFS = 100;//设计稿的宽度 375px
var psdWidth = 375;//当前屏幕宽度对应的html字体大小 currHtmlFS var currHtmlFS  = currSreenWidth*prevFS/psdWidth;
console.log(currHtmlFS);//将计算结果赋值给html的字体大小属性
document.documentElement.style.fontSize = currHtmlFS +'px';

视口，像素和屏幕宽度获取方法相关推荐

html网页宽度自动适应手机屏幕宽度的方法
html网页宽度自动适应手机屏幕宽度的方法 web项目中经常会出现html页面需要自适应手机屏幕的情况.可以通过设置屏幕的缩放比例来实现: 一.使用meta标签,这也是普遍使用的方法,理论上讲使用这个 ...
html宽度等于手机宽度,网页宽度自动适应手机屏幕宽度的方法
问题描述今天通过手机预览了一下目前正在做的网站,发现完全不是自己期望的效果,如下但是PC端预览是Ok的. 解决方案方案一为手机端开发一个站点.判断当前是不是手机访问,然后跳转到相应的网站. f ...
自动适应手机屏幕宽度的方法
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
网页宽度自动适应手机屏幕宽度的方法
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
响应式设计：理解设备像素，CSS像素和屏幕分辨率
概述屏幕分辨率.设备像素(device-width)和CSS像素(width)这些术语,在很多语境下,是可互换的,但也因此容易在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是 ...
php获得屏幕宽度,PHP获取客户端屏幕宽度、高度及分辨率的方法
PHP获取客户端屏幕宽度.高度及分辨率的方法发布时间:2015-11-21 08:08:45 作者:佚名阅读:(61) php获取客户端屏幕宽度.高度及分辨率的方法首先需要说明的是php是服务器 ...
H5手机端JS常用屏幕宽度和高度获取方法
js获取手机屏幕宽度.高度网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document. ...
android计算dpi代码_android计算pad或手机的分辨率/像素/密度/屏幕尺寸/DPI值的方法...
手机分辨率基础知识(DPI,DIP计算) 1.术语和概念术语说明备注 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸摩托 ...
c#图像处理入门(-bitmap类和图像像素值获取方法)
c#图像处理入门 -bitmap类和图像像素值获取方法一．Bitmap类 Bitmap对象封装了GDI+中的一个位图,此位图由图形图像及其属性的像素数据组成.因此Bitmap是用于处理由像素数据定义 ...

视口，像素和屏幕宽度获取方法

设备划分

视口

逻辑像素和物理像素

二倍图技术

屏幕宽度获取

h5媒体查询

js获取视口的宽度

视口，像素和屏幕宽度获取方法相关推荐

最新文章

热门文章