首页 > 代码库 > 到底什么是响应式布局

到底什么是响应式布局

2024-08-17 23:50:43   237人阅读

做移动端的前端，接到的需求中肯定离不开响应式布局，那么到底什么是响应式布局，其实现的原理在哪，我个人的看法如下：

1.目的：在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够适配多个终端

2.由于响应式布局多是针对移动端，所以首先要在<head>标签中添加下面这行代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面

3.宽度百分比，也就是所谓的流式布局，用法很简单，但缺点是显示出来的一些页面元素宽度被拉的很长，但是高度还是和原来一样，所以看起来非常的不协调

4.媒体查询，即针对不同的屏幕尺寸设置不同的样式，它告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写：

@media only screen and (max-width:980px){   
     #head { … }   
     #content { … }   
     #footer { … }   
}

或者

<link rel="stylesheet" href="style.css" media="only screen and (max-width:980px)"/>

如果兼容的终端类型多了，就要多写几个@media或者引入多个<link/>标签

5.rem，通过根元素进行适配的（只参照<html>中的font-size，和<body>没有任何关系），这主要是针对响应式字体，可以写成：

@media only screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media only screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media only screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media only screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media only screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media only screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media only screen and (min-width:800px){html{font-size:25px}}

注意：上面是先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置

6.完全适配，如果要所有设备分辨率都能兼容适配，可以通过JS去动态计算根元素的font-size，代码如下：

(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘;
        console.log($("html").css("font-size"));
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

注意：我所在公司的UI给的是750宽度的设计图，所以在该屏幕尺寸下的根元素的font-size是100px，然后直接将设计图中具体部位的尺寸大小除以100就可以得到对应的rem值，即完成了从px到rem的换算；

如果现在的屏幕尺寸是375（iphone 6），是750的一半，也就是说，设计图里指定宽度为200px(对应的width值为2rem)的地方，现在放在iphone 6上就显示为100px，但对应的width值还是2rem，所以只需要给该元素添加width:2rem，就实现了宽度的全适配

7.背景图片，具体请参考background-size这个新属性

到底什么是响应式布局


联系
我们