码迷,mamicode.com
首页 > 移动开发 > 详细

移动端布局

时间:2017-05-23 11:14:15      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:flow   indent   像素   html   base   str   height   var   box   

1.滚动条默认是在html上的,移到body上

html{
   width: 100%;
   height: 100%;
   overflow: hidden;
}
body{
   width: 100%;
   height: 100%;
   overflow: auto;
}

2.高清屏1px边框还原

//因为像素比是放大的,缩放比可以缩小,只要相乘为1就能得到1px
var pixelRatio = 1 / window.devicePixelRatio;
//通过js动态设置视口的缩放比
document.write(‘<meta name="viewport" content="width=device-width,initial-scale = ‘+pixelRatio 
+ ‘,minimum-scale =‘ +pixelRatio+‘,maximum-scale=‘+pixelRatio+‘" />‘);

3.使用单位

px绝对单位,任何情况下都是固定值,在不同尺寸的屏幕下会错位。

% 相对单位,相对于父级(自身)的大小进行计算。对于不太好确定值的地方(如高度)不好使用百分比,会导致变形。

em相对单位,相对于当前字体大小的倍数。如果容器字体大小不一样,一一修改很麻烦。

rem 相对单位,只相对于html(root元素)的字体大小,移动端浏览器都兼容,这种布局比较通用。

   var html = document.getElementsByTagName(‘html‘)[0];
   //屏幕宽度
   var pageWidth = html.getBoundingClientRect().width;
   // 屏幕宽度 / 平分块数 = 基准值
   html.style.fontSize = pageWidth / 16 + "px";
//然后计算容器的rem数值,这样不同的屏幕,容器布局结构不会变。(即将整个屏幕均等分,再计算容器的占比。)
//开发css时,使用less定义@rem变量,不用每次都用计算器计算。

4.使用背景图或者img,要针对不同的屏幕调整对应的大小:

  如果图片大小和容器大小一致,可以使用width:100%。

  如果图片和容器大小不一样,那么需针对图片分别设置宽/高,背景图设置background-size(x baseRem,y baseRem)。

  在物理像素和css像素不是1:1时,retina屏相当于放大,会添加中间色的像素,导致模糊。想要图片不模糊失真,需要针对retina屏的图片重新制作一张像素总数更多的图片。

 技术分享

5.文字要测量行高,再算padding(rem)

6.文字前插入小图标:

  搜索框:div.search_box:before(图标)+form input(padding-left)

      a标签:a的background(图标)+text-indent(文字)

7.<link/>的media属性只是规定了只有复合条件的媒体样式表才会生效,但不符合条件的样式表依然会被下载到客户端。

8.移动端fixed定位的元素中有input时,触发键盘后会导致固定定位错位,可以使用绝对定位或者跳转到别的页面避免。

  绝对定位会卡顿,需要用js解决,固定定位有兼容性问题

9.常用样式调整

a{
    /*取消a标签手指按下时出现的黑色遮罩层*/
    -webkit-tap-highlight-color:transparent;
    text-decoration:none;
}

input{
    /*去除IOS下表单元素圆角*/
    -webkit-apperance:none;
}

移动端布局

标签:flow   indent   像素   html   base   str   height   var   box   

原文地址:http://www.cnblogs.com/kevin2chen/p/6892953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!