目录
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加。
1.私有前缀
-
-moz-:代表firefox浏览器私有属性
-
-ms-:代表ie浏览器私有属性
-
-webkit-:代表safari、chrome私有属性
-
-o-:代表Opera私有属性
2.提倡写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
1.浏览器基础
1.1浏览器现状
国内的UC和QQ,百度等手机浏览器都是根据webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发一样。
总结:兼容移动端主流浏览器,处理webkit内核浏览器即可。
1.2手机屏幕现状
-
移动端设备屏幕尺寸非常多,碎片化严重
-
Android设备有多种分辨率:480800,480854,540960,7201280,1080*1920等还有传说中的2K,4K屏
-
近年来IPhone的碎片化也加剧了,其设备主要分辨率有:640960,6401136,7501334,12422028等
-
作为开发者无需关注这些分辨率,我们常用的尺寸单位是px
1.3常见移动端屏幕尺寸
1.4移动端调试
-
chrome DevTools 的模拟手机调试
-
搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
-
使用外网服务器,直接IP或域名访问
chrome模拟调试:
(此为布局视口)
2.视口
视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分为布局视口\视觉视口和理想视口
2.1布局视口 layout viewport
-
一般移动端的浏览器都默认设置了一个布局视口,用以解决早期PC端网页在手机上显示的问题
-
IOS Android基本都将这个视口分辨率设为980px,使用PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认通过手动缩放网页
2.2视觉视口 visual viewport
-
字面意思,他是用户正看到的网站的区域.注意:是网站的区域
-
我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来宽度
2.3理想视口 ideal viewport
-
为了使网站在移动端有最理想的浏览和阅读宽度而设定
-
理想视口,对设备来讲,是最理想的视口尺寸
-
需要手动添加meta视口标签通知浏览器操作
-
meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就有多宽
2.4meta视口标签
<meta name="viewport"
content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
width=device-width:宽度等于设备宽度
2.5标准的viewport设置
-
视口宽度和设备保持一致
-
视口的默认缩放比例1.0
-
不允许用户自行缩放
-
最大允许缩放比例1.0
-
最小允许缩放比例1.0
3.二倍图
3.1物理像素&物理像素比
-
物理像素是指屏幕中显示的最小颗粒,是物理中真实存在的.这是厂商在出厂时就设置好的,比如苹果6是75*1334
-
我们开发时候的1px不是一定等于1个物理像素
-
PC端页面,1px等于1个物理像素,但是移动端就不尽相同
-
一个px的能显示的物理像素点的个数,称之为物理像素比或屏幕像素比
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
<body>
<div></div>
</body>
pc端实现效果:
移动端实现效果:
-
PC端和早前的手机屏幕/普通手机屏幕:1css像素=1物理像素的
-
Retina(视网膜屏幕)是一种显示技术,可以将更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度
3.2多倍图
-
对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会照成图片模糊
-
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题
-
通常使用二倍图,因为IPhone6/7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求
-
背景图片 注意缩放问题
<style>
/* 我们需要一个50*50像素(css像素)的图片 直接放到我们的IPhone8里面会变大2倍 100*100 */
/* 我们采取的是 放一个100*100图片 然后手动把这个图片缩小为50*50(css像素) */
/* 我们准备的图片 比我们实际需要的大小 大两倍 这种方式就是两倍图 */
img:nth-child(2) {
width: 50px;
height: 50px;
}
</style>
<body>
<!-- 模糊的 -->
<img src="../images/apple50(1).jpg" alt="" />
<!-- 我们采取二倍图 -->
<img src="../images/apple100.jpg" alt="" />
</body>
3.3背景缩放background-size
background-size属性规定背景图片的尺寸
background-size:背景图片宽度 背景图片高度;
-
单位:长度|百分比|cover|contain;
-
cover把背景图片扩展至足够大,以使背景图片完全覆盖背景区域
-
contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
background-size: cover:完全覆盖背景区域
background-size:contain:适应内容区域
<style>
div {
width: 500px;
height: 500px;
border: 2px solid red;
background: url(../images/kk.jpg) no-repeat;
/* background-size: 图片的宽度 图片的高度; */
/* background-size: 500px 500px; */
/* 只写一个参数 肯定是宽度 高度省略了 会等比例缩放 */
/* 里面的参数可以跟%,相对于父盒子来说 */
/* background-size: 50%; */
/* cover 等比例拉伸要完全覆盖div盒子,可能有部分背景图片显示不全 */
/* background-size: cover; */
/* contain 高度和宽度等比例拉伸 当宽度 或者高度 布满div盒子就不再进行拉伸,可能会有空白区域*/
background-size: contain;
}
</style>
<body>
<div></div>
</body>
3.4多倍图切图cutterman
4.移动端开发选择
4.1移动端主流方案
4.2单独移动端页面(主流)
通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。
4.3响应式兼容PC移动端
三星电子官网:www.samsung.com/cn/,通过判断屏幕宽度来改变样式,以适应不同终端
缺点:制作麻烦,需要花很大精力去调兼容性问题
5.移动端技术解决方案
5.1移动端浏览器
移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题
我们可以放心使用H5标签和CSS3样式
同时我们浏览器的私有前缀我们只需要考虑加webkit即可
5.2CSS初始化 normalize.css
移动端css初始化推荐使用normalize.css/
-
normalize.css:保护了有价值的默认值
-
normalize.css:修复了浏览器的bug
-
normalize.css:是模块化的
-
normalize.css:拥有详细的文档
官网地址:http://necolas.github.io/normalize.css/
5.3CSS3盒子模型 box-sizing
-
传统模式宽度计算:盒子宽度=css中设置的width+border+padding
-
css3盒子模型: 盒子宽度=css中设置的宽度widt里面包含了border和padding也就是说,我们的css3中的盒子模型,padding和border不会撑大盒子了
/*css3盒子模型*/
box-sizing:border-box;
/*传统盒子模型*/
box-sizing: content-box;
传统orCSS3盒子模型?
-
移动端可以全部CSS3盒子模型
-
PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容,我们就选择CSS3盒子模型
5.4特殊样式
/*css3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置transparent 完成透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁止长按页面时的弹出菜单*/
img,a {-webkit-touch-callout: none;}
<style>
/*css3盒子模型*/
/* box-sizing: border-box;
-webkit-box-sizing: border-box; */
/*点击高亮我们需要清除清除 设置transparent 完成透明*/
a {
-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
input {
-webkit-appearance: none;
}
/*禁止长按页面时的弹出菜单*/
img,
a {
-webkit-touch-callout: none;
}
</style>
<body>
<a href="">xxx</a>
<input type="button" value="dxxx" />
</body>
6.移动端常见布局
移动端技术选型
移动端布局和以前学习的PC端有所区别: