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

常见的手机站注意事项

时间:2016-08-31 17:11:47      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:

相信很多刚开始写手机界面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex,响应式布局……
这里主要介绍的是本人在实践中用的最顺手最简单的布局方案,以及要注意的一些事情。
 
1,head里边加入代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
(H5页面窗口自动调整到设备宽度,并禁止用户缩放页面)
 
这段代码的几个参数解释:
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
 

 
第一种写法:
html,body{font-size: 62.5% } 各大主流浏览器的fong-size:1rem=16px;这是默认的浏览器;  后边的布局按照正常的写法即可

 


 
第二种写法:rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了
<script type=”text/javascript”>
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = ‘100px’; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px’; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded’, recalc, false); })(document, window);
</script>

 

这是rem布局的核心代码,这段代码的大意是:
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
 
1,用rem布局,需要先设置html{ font-size:100px;},然后px/100
 
2,在rem布局中,页面中模块间距离一般为0.2rem。字体的大小一般分为四个档       次 0.2rem, 0.24rem ,0.28rem, 0.32rem。
 
3,背景图片平铺记得加:{background-size: 100% 100%;} 数字可以根据需要设置4,页面中的图片:{width: 100%; display: block;height: 100%;} 需要这样来设置
 
5,   宽高最好采用100%来做
 
6,配合媒体查询来设置不同的设备里的字体大小
    
 a,  简写语法
@media (min-width:800px) {} 当页面大于800px的时候执行它里边的CSS
b, 复杂表达式
@media (min-width:800px) and (max-width:1200px) {} 当页面大于800px,小于1200px的时候执行它里边的CSS
c, 高度和宽度媒体查询
@media (min-width:800px) and (min-height:400px) {} 当页面宽度大于800px,高度大于400px的时候执行它里边的CSS

 

第三种写法可采用弹性盒子模型来做,下一章节再讲解

常见的手机站注意事项

标签:

原文地址:http://www.cnblogs.com/amy-1205/p/5826702.html

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