移动端适配的问题

Posted 2020-09-22 凉心丶浮沉

在书写移动端项目的时候，我们必不可少的就是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图上的数据 -->