目录
设备划分
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';