web移动端布局及适配
一.运用<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
目的:a.为了是手机可以操作宽度等于手机设备的宽度
代码:width=device-width
b.用户不可以进行页面的缩放
代码:user-scalable=0
c.初始化缩放比例为1
代码:initial-scale=1.0
*********拓展知识*************
viewport:
1.通常来说,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。不同设备上的浏览器的默认viewport的宽度也不一样 如图:
但是,我们需要的只是显示只是手机屏幕大小的区域就足够了,所以我们设置了content="width=device-width。
tip:viewport的最小宽度只能设备的宽度,无法更加小了
2.为了更好的理解和应用viewport,可以把viewport细分一下。分别为(可见viewport,布局viewport,理想viewport),如下图:
3.理想viewport是最适合移动设备的viewport,理想viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为理想viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。理想viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对理想viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户
二:运用rem布局
vw:屏幕的宽度
rem:html的font-size的大小
因为1vw为屏幕的可视宽度,而我们的设计稿一般是根本iphone6的尺寸设计的,所以我们在设置html的时候只需要设置
html: 26.7%vw /*这里26.7%vw就相当于100px,所以1rem=100px*/
然后我们所有的图片,元素盒子,字体...只要关于px的都用rem相应替换,就能达到不同的手机根据你的屏幕的大小,你的图片,盒子,字体
这些都会跟着你的手机的屏幕改变而变大或者变小
例如: width:100px => width:1rem
三:DPR不同产生的影响
这里先解释一下DPR(设备像素比):
物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都
有自己的颜色值和亮度值.
设备独立像素:设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的
虚拟像素(比如: css像素),有时我们也说成是逻辑像素。
DPR = 物理像素 / 逻辑像素(px) ps:在某一方向,x 或 y 方向
/*************拓展知识**************/
问题:为什么一iPhone6为标准的设计稿的尺寸是宽750px?
答:iPhone6的满屏宽度是375px(Viewport’s device-width (in CSS pixels):375px,而iPhone6采用的视网膜屏的物理像素
是满屏宽度的2倍,并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面,设计师一般给出750px
的设计图,我们再根据需求对元素的尺寸设计和压缩。
简单点解释:
例:你的手机的分辨率为1920*1080 你的手机的宽为540 那么你的DPR就是2
也就代表1pxcss布局上面会有2个像素点去填充
所以如果你的图片是给DPR等于1的手机切的,这时图片上面的像素点和你手机上的像素点是一个点对一个点,那么到DPR等于2
手机上的时候,你的图片上面一个像素点就会被2个手机上面的物理像素给平分,像素点颜色本来就那么多,被拉大了,当然就淡了,就会导致你的图片很模糊。
解决办法:根据不同的DPR值去动态的获取不同的图片@2x,@3x...等图片
let DPR = window.devicePixelRatio
然后根据不同的DPR去动态拉取你的不同的图片即可;
四:特殊型号的手机;
当然,市面上也存在一些手机长宽比和普通的机型不一样的情况,比如:三星的s8+ 屏幕就属于窄长型,所以很多时候我需要写一些代码来处理这些与众不同的屏幕,这个时候就需要用到我们的媒体查询了:
例:@media screen and (min-width: 375px) and (max-width: 414px) {
ul li{
content: "Email: ";
font-style: italic;
color: #666666;
}
}
具体的媒体查询方法可以上 搜索 W3C School具体指导:https://www.w3cschool.cn/css3/um62qxp0.html
结语:完全属于个人经验,按照这四步,基本可以解决移动的布局问题,望指正,继续改进