移动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">width:设置宽度,不需要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-width: 640px;min-width: 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>