星空网 > 软件开发 > 网页设计

移动端布局

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

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

2.高清屏1px边框还原

//因为像素比是放大的,缩放比可以缩小,只要相乘为1就能得到1pxvar 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;}




原标题:移动端布局

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊法国订单包装趋于可回收化:https://www.kjdsnews.com/a/681727.html
Shopee利润太低了,难出单?:https://www.kjdsnews.com/a/681728.html
在“19个世纪”的时间里,竟能发生这些事!:https://www.kjdsnews.com/a/681729.html
单量涨10倍!揭秘Shopee大卖绝不透露的广告玩法!:https://www.kjdsnews.com/a/681730.html
亚马逊欧洲首个“一日达”运营中心在西班牙正式投用!:https://www.kjdsnews.com/a/681731.html
亚马逊物流费上涨啦!中国卖家集体呼吁涨价!:https://www.kjdsnews.com/a/681732.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流