常见的手机站注意事项

相信很多刚开始写手机界面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局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

 

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

转载于:https://www.cnblogs.com/amy-1205/p/5826702.html