移动web由于其比较方便的上网方式,受到各大公司的极力推广,市场占有率甚至超过了pc端,所以前端开发人员需要不仅做好pc端的开发工作,更要做好移动端的开发.
移动端市场份额由高到低的浏览器有:UC.QQ.baidu.360.猎豹.搜狗.opera,其中除了opera拥有自己的内核,其他浏览器都用的webkit内核,所以我们开发移动端时只考虑webkit即可,所以H5和C3可以充分发挥其作用,基本不用考虑兼容,当然,大型网站还是要考虑兼容.还有一些浏览器,firefox.ie.windowphone装机量都很低
移动端基本上好多设备都是用的retina屏幕,即视网膜屏幕设备,市场上比较多的是2x设备和3x设备,2x设备是4个点当一个点用,3x设备是9个点当一个点用,为了让肉眼看不出像素颗粒,提供更好的用户体验,比如4s是2x设备,其屏幕分辨率是640*960,但物理分辨率,显示内容依据的分辨率是320*480,这个设备是乔布斯推出的,最先运用在4s上
viewport即移动端的视口大小,也就是可以看到的内容区域大小
meta:vp + tab就可以打出来<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
设置宽度,不需要px,device-width可以实现自动适应屏幕
user-scalable:是否只是缩放,可选值为 yes no 也可以写 1(yes) 0(no)
initial-scale=1.0 默认viewport的缩放大小,一般设置的是 1.0 不进行缩放
maximum-scale 最大的缩放比例(缩放比例为1时,不用设置)
minimum-scale 最小的缩放比例(缩放比例为1时,不用设置)
height:高度(基本不用,内容将页面撑大即可)
我们开发时,一般会设置最大宽度和最小宽度max- 640px;min- 320px;
开发时,通用格式至少需要写
*,
::before,
::after {
margin: 0;
padding: 0;
/* 去除移动端 默认的 手指 点击 高亮效果 transparent 透明*/
-webkit-tap-highlight-color: transparent;
/* 添加 盒子模型 为了 优先 保证 盒子的 大小 */
-webkit-box-sizing:border-box ;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul,ol{
list-style: none;
}
/* 移动端 会取出 他四周的 边框 */
input{
border: none;
outline: none;
/* 有一些 移动端的浏览器 会有默认的 3d效果 比如 阴影,3d渐变 */
-webkit-appearance: none;
}
.clearfix::before,
.clearfix::after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
为了提高开发效率,可以设置下面的方法
浮动:
.f_left{
float: left;
}
.f_right{
float: right;
}
设置margin:
.m_l10{
margin-left: 10px;
}
.m_r10{
margin-right: 10px;
}
.m_b10{
margin-bottom: 10px;
}
.m_t10{
margin-top: 10px;
}
设置border:
.b_l{
border-left: 1px solid #eee;
}
.b_t{
border-top: 1px solid #eee;
}
.b_b{
border-bottom: 1px solid #eee;
}
.b_r{
border-right: 1px solid #eee;
}
需要使用时直接加相应的class即可
sublime中可以封装相应的代码段
tool--新代码段--
<snippet>
<content><![CDATA[ 此处写相应代码
]]></content>
<tabTrigger>此处写引出代码段的字符</tabTrigger>
</snippet>