如何写移动端页面

最新推荐文章于 2022-09-16 20:26:20 发布

stupidcc

最新推荐文章于 2022-09-16 20:26:20 发布

阅读量1.9k

点赞数 2

分类专栏：移动端

本文链接：https://blog.csdn.net/e87e09e11/article/details/69388164

版权

移动端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="static/jquery.min.js"></script>
    <script src="static/moment.js"></script>
    <title>律所网校</title>
    <script>
        var scale = 1 / devicePixelRatio;
        document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if(document.documentElement.clientWidth/devicePixelRatio<=414){
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
          }else if(document.documentElement.clientWidth>=1136&&document.documentElement.clientWidth<=2208){//5s 6s横屏
             document.documentElement.style.fontSize = '108px';
         }else if(document.documentElement.clientWidth>2208){
             document.documentElement.style.fontSize = '54px';
         }else{
             document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
         }

        window.addEventListener("resize", function() {
            window.location.reload()
         },false)
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
script标签里的内容就是根据devicePixelRatio计算出scale 
然后赋值给initial-scale maximum-scale  minimum-scale并且计算出html的fontSize=屏幕宽/10  
这样屏幕宽就是10rem,1rem=屏幕宽/10 
比如750px的设计稿 1rem=75px;写页面时 单位基本都用rem 除了个别的具体细节用px
/**********************************第二种方式 1rem=100px*****************************************/
今天又读到另一篇文章，http://www.cnblogs.com/qiny-easyui/archive/2016/11/26/6104190.html 
关于rem的用法 1rem=100px;这种方式在写代码时计算量少，更快捷，
截取了其中的部分以便记录
假设设计师给的设计稿是iphone6的宽度，即375px(高清的视觉稿750/2=375)
我们完全可以按照设计稿的尺寸来给元素赋值，
比如设计稿是80px,那么css就写80px；这样所有网站的页面都写好后，
我们需要做两件事1 设置页面的rem大小html{font-size:calc(100vw/3.75)}100vw是设备的宽度，
除以3.75可以让1rem的大小在iphone6下等于100px2 替换页面中的单位，
把所有的px单位替换成rem，除以100。
比如前面的80px,就是0.8rem这样在iphone6下所有元素的尺寸还是和视觉稿的尺寸一样，
而iphone5 因为屏幕宽度变小了，100vw/3.75得到的值也会变小，即rem的单位值会变小。
页面中所有的尺寸会等比例缩放这样就可以做到针对不同分辨率的设备保持视觉一致了。
最后，前面用到vw单位 但是低版本的可能不支持，
那么就需要js来处理一下
<script>   
 document.doucmentElement.style.fontSize=window.innerWidth/3.75+'px'
</script>
第三种方法 也是最常用的一种就是在js里设置 使1rem=100px
width=document.doucmentElement.clientWidth;屏幕宽
document.documentElement.style.fontSize=width/100+'px'