首页 > 代码库 > 常见的手机站注意事项

常见的手机站注意事项

2024-08-11 11:56:33   219人阅读

相信很多刚开始写手机界面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局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的时候执行它里边的CSSb, 复杂表达式@media (min-width:800px) and (max-width:1200px) { … } 当页面大于800px，小于1200px的时候执行它里边的CSSc, 高度和宽度媒体查询@media (min-width:800px) and (min-height:400px) { … } 当页面宽度大于800px，高度大于400px的时候执行它里边的CSS

 

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

常见的手机站注意事项


联系
我们