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

移动端适配方案-rem(基础篇)

时间:2018-06-06 22:20:59      阅读:3323      评论:0      收藏:0      [点我收藏+]

标签:学习   fonts   语法   不同   移动   har   dia   图片   viewport   

  

  常见移动web适配方案一般有3种方法,如下图:

  技术分享图片

    ①:定高,宽度百分比(百分比适配简单,一般用来做一些适配性不高的页面,比如只有一些文字和图片等简单的屏幕适配)

    ②:flex (更多的用于复杂页面的布局。具体参照阮一峰大神写的-Flex 布局教程:语法篇和实例篇

      http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool   (语法篇

      http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 实例篇

    ③:媒体查询(css3 media媒体查询器用法总结:http://www.bubuko.com/infodetail-268180.html

    注:flex和媒体查询这2种方案可以实现移动端的日常响应式开发。但不推荐媒体查询,因为针对不同屏幕的不同页面都要去单独写样式,很麻烦,而且低效。

 

    Rem:

    以下是我在学习rem的过程当中看过的几篇写得比较好的文章,内容容易理解,也比较全面,适合入门。看完以后,对rem就了解得差不多了,所以我就不再赘述了。

    http://www.w3cplus.com/css3/define-font-size-with-css3-rem  CSS3的REM设置字体大小

    https://www.jianshu.com/p/b00cd3506782  手机端页面自适应解决方案—rem布局基础篇

 

    https://www.jianshu.com/p/985d26b40199  手机端页面自适应解决方案—rem布局进阶版(附源码示例)

 

 

  最近跟着某视频学rem,然后写了个简单的demo。用JS动态修改根元素的字体大小,跟上面链接里引用的JS不同,个人感觉更简单,容易理解 

  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>动态修改font-size方法-rem</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            html {
                font-size: 16px;
            }
            .box {
                width: 10rem;
                height: 10rem;
                background-color: black;
            }
            .text {
                color: #fff;
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            <p class="text">hello rem</p>
        </div>
        
        <script type="text/javascript">
            //  获取视窗可视宽度
            let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
            console.log(htmlWidth);
            
            //    获取视窗可视高度
            let htmlDom = document.getElementsByTagName(html)[0];
            console.log(htmlDom);
            
            //  这里除以10方便计算,不要除以太离谱的数值,比如200,浏览器无法识别这么小的值
            //  这里htmlDom计算出的值,相当于给html设置font-size
            htmlDom.style.fontSize = htmlWidth / 10 + px;
        </script>
    </body>
</html>

 

 

 

    

    

    

    

 

    

 

    

 

  

移动端适配方案-rem(基础篇)

标签:学习   fonts   语法   不同   移动   har   dia   图片   viewport   

原文地址:https://www.cnblogs.com/tu-0718/p/9146631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!