移动端由于发展比PC晚些,所以比PC更不用考虑兼容性,因为css1的时代都没几个手机浏览器吧。
移动端常见浏览器
总结︰兼容移动端主流浏览器,处理Webkit内核浏览器即可。
手机屏幕现状
移动端设备屏幕尺寸非常多,碎片化严重。 Android设备有多种分辨率∶480x800,480x854, 540x960,720x1280,1080×1920等,还有传说中的2K,4k屏。近年来iPhone的碎片化也加剧了,其设备的主要分辨率有∶640x960,640x1136,750x1334,1242x2208等。作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是px。注∶作为前端开发,不建议大家去纠结dp , dpi , pt , ppi等单位。
移动端调试方法
-
Chrome DevTools (谷歌浏览器)的模拟手机调试,需要能掌握下面的切换手机型号、添加手机型号、屏幕缩放、旋转屏幕
-
搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
-
使用公网服务器,直接IP或域名访问
视口viewport
视口( viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口,学会理想视口即可,其他:了解。
布局视口layout viewport
早期为解决PC端页面在手机上显示的问题,一般移动设备的浏览器都默认设置了一个布局视口。iOS Android基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。例如以前pink老师带大家写1200版心宽的PC端页面,放手机上看,横屏的1200px全显示在竖屏的手机上,能显示,但是字小。所以布局视口out了。
视觉视口visual viewport
字面意思,它是用户正在看到的网站的区域。注意∶是网站的区域。我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。
理想视口ideal viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0" />
为了使网站在移动端有最理想的浏览和阅读宽度而设定。对设备来讲,理想视口是最理想的视口尺寸。需要手动添写meta视口标签通知浏览器操作。理念是:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽。
下图代码是标准的理想视口的设置属性值,即视口宽度和设备保持一致&视口的默认缩放比例1.0&不允许用户自行缩放&最大允许的缩放比例为1.0&最小允许的缩放比例为1.0。
当不加此meta标签,默认是布局视口,如果写了“黑马两个字”,每个字16px,而布局视口一般横向上会显示980px的长度,16/980是很小的,所以字看不清。如果加上此标签,字16px,而网页宽度等于设备宽度比如200px,那么16/200就不算小,字就能看见了。
二倍图
物理像素&物理像素比
物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334(物理像素关联到分辨率,可以理解为有750×1334=100500个物理上的屏幕颗粒/物理像素)。我们开发时候的1px不是一定等于1个物理像素的。PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同,一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比。
iphone8是750×1334,而iphone8的物理像素比是2,所以图上的375即375px,等价于375px×2=750物理像素。历史原因:早期手机1物理像素和1px是一比一,但是分辨率太小不清晰,直到视网膜屏幕技术诞生,它可以在同一块大小的屏幕里塞更多的物理像素点,就有了2×2个物理像素等于1px了
二倍图解决了视网膜屏幕技术导致的模糊问题
视网膜屏幕技术的优点带来了缺点:一个为1物理像素和1px等价1:1设计的图片,经视网膜屏幕技术后一个图片像素用四个物理像素来显示,容易产生锯齿状、模糊(文字倒不怕,文字是矢量的而且纯色)。
例如我们需要一个50×50css像素的图片放入50×50的盒子里,该盒子直接放到我们的iphone8里会用 100×100个物理像素来显示,就会模糊。我们采取的方法是放一个100×100图片,然后手动的把这个图片缩小为50* 50 css像素(如background-size: 50%;估计压缩过程不会丢弃像素点),即我们准备的图片比我们实际需要的大小大2倍,这就方式就是2倍图。这样即使新50宽高图片需要在iphone8里扩大两倍,也就恢复原大小,显示起来就不模糊。下图是原图50×50和原图100×100的图片显示在iphone8的50px×50px的盒子里的效果图:
多倍图
对于一张50px × 50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊;在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题;通常主流上使用二倍图(因为iPhone 6\7\8的影响),但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求。
background-size
背景图需要能缩放
background-size: 背景图片的宽度 背景图片的高度; /* 单位px或百分比等 */
background-size: 背景图片的宽度; /* 高度等比例缩放 */
background-size: cover | contain; /* 高度等比例缩放 */ /* cover让背景图完全cover盒子,可能有部分背景图被截取不显示,即会等比例缩放图片至长和宽上都刚好够覆盖容器的全部范围,例如如果宽刚好够了,但高上还没填满,就会继续扩大至高上也填满 */
/* contain 当宽度或者高度铺满div盒子就不再进行拉伸了,让盒子contain图片,可能有部分空白区域*/ */
现在背景图有了缩放,就可以用二倍图原理确保图片在手机上显示清晰。 为了手机上的清晰,例如开发中有个50×50的盒子,就要准备100×100的背景图,用background-size: 50%;缩放
移动端杂谈
设计网页时如何兼容移动端?
-
单独制作移动端页面(主流):京东商城手机版、苏宁易购手机版、淘宝触屏版
通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。m.taobao.com、 m.jd.com、m.suning.com
-
响应式页面兼容移动端(其次):三星手机官网
三星电子官网: www.samsung.com/cn/,通过判断屏幕宽度来改变样式,以适应不同终端。 缺点:制作麻烦,需要花很大精力去调兼容性问题。
具体用哪种得看公司选择哪种
移动端浏览器优点
移动端浏览器基本以webkit内核为主,因此我们就只考虑webkit兼容性问题,所以我们可以放心使用H5标签和CSS3样式。如果非要兼容老版本移动端浏览器,我们只需要考虑添加-webkit-即可
box-sizing
box-sizing: border-box; /* 盒子的width包含了border+padding */
box-sizing: content-box; /* 盒子宽度=width+border+padding */
用传统or CSS3盒子模型?:
-
移动端可以全部CSS3盒子模型
-
PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择CSS3盒子模型。考不考虑得看公司要求。考虑也没事,也就每次手动地加减下呗
*移动端初始化
移动端不用PC上的那个初始化了。移动端CSS初始化推荐使用normalize.css,理由如下: Normalize.css:保护了有价值的默认值;Normalize.css:修复了浏览器的bug;Normalize.css:是模块化的;Normalize.css:拥有详细的文档。官网地址: http://necolas.github.io/normalize.css/。其次还要加上以下代码
/* 移动端自己补充的初始化,下行有个设置理想视口,记得复制粘贴 */
/* <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0" /> */
/* 当采用flexible.js布局时,由于body的max-width:750px,
我们不希望屏幕宽度>750px时flexible.js继续发挥作用,
故下行代码将1rem限定在75px(按10等分) */
/* @media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
} */
* {
/* css3盒子模型 */
box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
/* 清除a链接的下划线 */
text-decoration: none;
}
img,
a {
/* 禁用长按页面时的弹出菜单 */
touch-callout: none;
}
input,
button {
/* 移动端浏览器默认给input和button加了样式,此时不能自定义样式,我们清除掉 */
appearance: none;
}
input {
/* input去掉边框 */
border: 0;
}
a {
/* 清除点击高亮,即设置成透明色 */
tap-highlight-color: transparent;
}
body {
margin: 0 auto!important;
width: 100%;
max-width: 750px;
min-width: 320px;
}
li {
list-style: none;
}
高亮比如a标签,PC端没啥,但在手机上,按下去会触发背景高亮,即下图蓝色,我们不想要,加上代码就去掉了:
IOS上的按钮和输入框有默认外观,可能不好看且此时不支持自定义样式,需要配置下:
手机上图片和链接被长按会显示菜单栏,有的时候没必要显示,就可以禁用,例如有一个需求就是h5页面中,长按二维码图片,保存到手机;在ios上经常长按会弹出ios的菜单,而无法每次都能够进行保存到手机的操作。解决办法:给图片img添加-webkit-touch-callout: none;:
移动端常见布局
PC端我们有版心1200px且居中对齐的习惯,但在移动端,无需,因为网页宽度就是屏幕宽度。布局手段分多种方向:
-
单独制作移动端页面:技术选型也有很多方案,没有最好,只有合适,每种方案都有大公司在用,所以都学。
-
流式布局(百分比布局)
-
flex弹性布局(强烈推荐)
-
less+rem+媒体查询布局
-
flexible.js + rem
-
vw/vh布局
-
混合布局
-
-
响应式
-
媒体查询
-
bootstarp
-
流式布局(百分比布局)
流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充(所以body要有margin: 0 auto;)。流式布局方式是移动web开发使用的比较常见的布局方式。它讲究网页宽度就是100%,而不是具体的多少px,这样两个50%宽的盒子并排放置,不论在哪个设备上都能显示的刚好。示例:
* {margin: 0;
padding: 0;}
section {width: 100%;}
section div:nth-child(1),
section div:nth-child(2) {float: left;
width: 50%;
height: 400px;}
section div:nth-child(1) {background-color: blue;}
section div:nth-child(2) {background-color: red;}
</style></head>
<body> <section> <div>1</div> <div>2</div> </section>
但是缺点是:如果屏幕老宽了,盒子就会老扁了,文字图片显示松散,如果屏幕老窄了,那么文字、图片就会老紧凑且小了。解决:max-width、max-height、min-width、min-height,所以上述css代码改进:
section {width: 100%;}改为section {width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;} 很多情况下,这个section往往就是body
二倍精灵图的设计方法
准备好一张大小适宜的精灵图,例中我有个20×20的盒子,那么精灵图中某图标就是40×40大小。在PS、firework等工具里将该精灵图缩到一半(对应background-size: 原图宽度一半px;),此时测量从图片左边缘到某图标左边缘的px距离,如81px则最终代码应写为background: url(sprites.jpg) -81px 0;background-size: 原图宽度一半px;
图片格式
-
DPG图片压缩技术
京东自主研发推出DPG图片压缩技术,经测试该技术,可直接节省用户近50%的浏览流量,极大的提升了用户的网页打开速度。能够兼容jpeg,实现全平台、全部浏览器的兼容支持,经过内部和外部上万张图片的人眼浏览测试后发现,压缩后的图片和webp的清晰度对比没有差距。
-
webp图片格式 谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3并能节省大量的服务器宽带资源和数据空间
共有 0 条评论