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

移动端适配的问题

时间:2017-06-12 18:11:34      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:cli   宽度   style   实现   项目   单位   mini   字体大小   代码   

在书写移动端项目的时候,我们必不可少的就是meta标签的viewport视图:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scle=2.0,mininum-scale=1.0,user-scaable=no">

加上这段代码就是为了使页面的宽度可以等于屏幕的宽度,并且给移动端添加显示的初始比例,最大缩放比,最小缩放比,以及是否允许用户缩放屏幕

移动端的自适应实现在这里,我主要介绍四种方法:

<!-- 方法一rem布局 -->
<!-- 给body和html添加一个font-size="100px"属性,并且将页面中的标签,不管是宽高,还是font-size,或着是其他的一些属性,只要有px的一律都改成rem单位,
<script>
function resetsize(){
var html=document.getElementsByTagName(‘html‘)[0];
var Ww=document.documentElement.clientWidth;
html.style.fontSize=Ww/psd的宽度*起始设置的fontSize+"px";
}
resetsize();
window.onresize=function(){
resetsize();
}
</script> -->

<!-- 方法二zoom布局 -->
<!-- 按照给定的psd图布局并且所有的尺寸都不变,直接按照给定的大小书写就好

<script>
function resetzoom(){
var Ww=document.documentElement.clientWidth;
var scale=Ww/当前psd图的宽度;
document.body.style.zoom=scale;
}
resetzoom();
window.onresize=function(){
resetzoom();
}
</script> -->

<!-- 方法三百分比布局 -->
<!-- 给html和body设置宽和高均为100%,页面中的所有与边距有关的都设置为百分比,但是字体大小仍然使用px; -->

<!-- 方法四引入外部文件 -->
<!-- 在引入外部文件(ort.js)之前,首先必须引入jq文件,值得注意的是,页面中的所有内容均使用PSD图上的数据 -->

移动端适配的问题

标签:cli   宽度   style   实现   项目   单位   mini   字体大小   代码   

原文地址:http://www.cnblogs.com/D-Y-W/p/6994257.html

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