页面布局（6）：响应式布局

最新推荐文章于 2024-08-28 23:30:23 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-08-28 23:30:23 发布

阅读量886

点赞数 2

分类专栏： CSS html

本文链接：https://blog.csdn.net/tuzi007a/article/details/117201683

版权

CSS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

大家好，我是梅巴哥er。本篇介绍响应式布局，用js+rem来解决。响应式的介绍，在页面布局（2）：腾讯首页中简单聊过，但是说的不够完善，所以本篇中，将会更具体的做介绍，并能实际应用。

响应式和自适应的区别

响应式是不管页面宽度怎么变化，主要布局不会变化，体现的内容主题也不会变化。
自适应是随着页面宽度的变化，布局也会有一定变化。其实在腾讯首页中，是做的自适应。
详情可以查看这篇文章：响应式网站自适应网站的区别以及利与弊

app响应式的核心点

首先，手机屏幕的宽度有很多种（以下列出了部分手机屏宽信息），我们需要让长度单位随着屏幕宽度而发生变化。

手机型号	屏幕宽度，px
iphone5/SE	320
iphone6/7/8	375
iphone6/7/8 Plus	414
iphoneX	375
ipad	768
ipadPro	1024
安卓常见	360

其次，UI给的设计稿的宽度，也是不同尺寸的。有468px的，768px，648px，1080px等等。我们做页面的时候，就是先根据UI设计稿的宽度来做的。
详细一点说，假如我们从UI拿到了一个640px的稿子，那么我们做页面全屏情况下最大宽度就是640px，也就是说，用这个稿子写好的页面，放在屏幕为640px的手机上，大小宽高是刚刚合适的。此时，如果我们把页面放在宽度为320px的手机上，要怎么做呢，肯定是希望做好的页面也同比例缩小到320px，让我们的页面在320px的手机上也刚好合适。

响应式怎么做

核心点已经找到，就是盒子的尺寸要随着页面尺寸的变化而变化。
常说的方法有多种，比如@media screen ， viewport ， js+rem等
第一种方法需要知道各种机型具体的尺寸，麻烦
第二种不灵活，麻烦
第三种，js，前端的灵魂。以前都说rem有兼容性问题，但是IE很快就要消失了，也就不存在兼容性了。rem起飞~
这里有一段封装好的代码

// W 表示当前屏幕宽度
// designWidth表示设计稿的宽度
// 这时一个立即执行函数，把设计稿宽度的参数带入即可
<script>
    (function (win, designWidth) {
            function setUnitA() {
                var W = document.documentElement.clientWidth;
                if (W >= designWidth) {
                    W = designWidth;
                }
                document.documentElement.style.fontSize = W * 100 / designWidth + "px";
            }
            var h = null;
            window.addEventListener("resize", function () { clearTimeout(h); h = setTimeout(setUnitA, 300); }, false);
            setUnitA();
        })(window, designWidth); 
  </script>

举个例子，加入设计稿宽度是1080px，那么代码就是：

<script>
    (function (win, designWidth) {
            function setUnitA() {
                var W = document.documentElement.clientWidth;
                if (W >= designWidth) {
                    W = designWidth;
                }
                document.documentElement.style.fontSize = W * 100 / designWidth + "px";
            }
            var h = null;
            window.addEventListener("resize", function () { clearTimeout(h); h = setTimeout(setUnitA, 300); }, false);
            setUnitA();
        })(window, 1080); // 只需要在这里传参即可
  </script>

*注：这个代码一定要放在<head>标签里，而且位置要在其他引入文件前面。

解释原理

这个方法就是根据css3的长度单位rem来设计的。
rem是指html元素的font-size
比如，html {font-size: 100px;}，此时1rem = 100px
了解了这些，我们再看下rem在实际应用中的换算。
假设我们的基础页面宽度是1000px，这时候我们设置1rem = 100px。一个div盒子宽度width是300px，用rem单位时，就是width: 3rem。
当页面实际宽度变为500px时，1rem就变成了50px，这时候div盒子的宽度width = 3rem = 150px了。
不知道这样说，会不会很绕。再做个比喻吧。
假设1rem就是1g黄金，1px就是一块钱。
现在小日子过的不错的你，花了1000块钱买了1g黄金，打算做收藏。没想到过了几天，时局动荡，你急用钱，就把这1g黄金转手卖掉了，只卖了500块钱。那1g黄金没变，变的是你手里的钱。
就是用这个原理，做到了页面的响应式。rem单位，就相当于一个单位中转站。

问题与思考

当基础页面（设计稿）是1080px时，我们设定1rem = 100px 。这时候，我们需要给一个div的文字设置font-size，假设我们设置的是0.2rem（也就是20px），当我们切换成屏幕为320px的iphone时，这时候的1rem = 33px ，此时div的font-size也是0.2rem，但是实际大小只有6.6px 。而谷歌浏览器的默认文字大小是16px，文字最小尺寸是10px， div的font-size的0.2rem应该为6.6px，但是实际上因为浏览器的限制而变成了10px，这突然造成了文字溢出。
为了避免这种情况。要给body设置一个font-size尺寸作为最小值。比如font-size: 0.33rem，这样可以确保文字的实际尺寸不小于10px。

demo要等到以后深入研究后再写吧。以上。