前言

因为我现在主要是写企业定制网站

趁我现在对适应的理解比较深入,故总结

有些事情现在不去做，以后都不会在做了!

所以整理一下关于布局的适应

以下是我关于自适应/响应式的一些观点和理解

设计图与代码 (github提供下载)

以设计图为例

1920的设计图

设计图1920尺寸.png

1300的版心

版心1300.png

我们根据设计图实现一个最基础的布局

素材:

初始化样式

basic.css

@charset "UTF-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin: 0;padding: 0;}
html {font-size: 62.5%;}
body {font: 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;color: #333;background-color: #fff;overflow-x: hidden;}
a{text-decoration: none;cursor:pointer;}
ul, li {list-style-type: none;}
input{outline: none;}
textarea{outline: none;resize:none}
.clearfix:after {content: "";display: block;visibility: hidden;height: 0;clear: both;}
h1,h2,h3,h4{font-size:12px; font-weight:normal}

复制代码

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://juejin.cn/post/css/basic.css">
    <style>
        body{
            background: #f0f0f0;
        }
        /*版心*/
        .typeArea{width: 1300px;margin: 0 auto;position: relative}
        .proList{
            padding:125px 0;
            background: #fff;
        }
        .proList>.typeArea{
            display: flex;
            flex-wrap: wrap;
        }

        .proList>.typeArea>.production{
            width:308px;
            margin-right:20px;
            margin-top:57px;
        }
        .proList>.typeArea>.production>.imgContent{
            width:100%;
            height:210px;
        }
        .proList>.typeArea>.production>.imgContent>.img{
            width:100%;
            height:100%;
            object-fit: cover;
        }
        .proList>.typeArea>.production>.info{
            box-sizing: border-box;
            padding:22px 8px 34px;
            border-bottom:1px solid #ddd;
        }
        .proList>.typeArea>.production>.info>.title{
            font-size:18px;
            color: #535353;
        }
        .proList>.typeArea>.production>.info>.des{
            font-size:14px;
            color: #959595;
            margin-top:15px;
        }

        .proList>.typeArea>.production:nth-child(4n){
            margin-right:0;
        }
        .proList>.typeArea>.production:nth-child(-n+4){
            margin-top:0;
        }

    </style>
</head>

<body>
<div class="proList">
    <div class="typeArea">

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

    </div>
</div>

</body>

</html>

复制代码

实现的布局:

实现布局.png

我们拖动浏览器,效果:

正常效果.gif

我们借助插件来实现这个效果

lib-flexible(js插件)

pxToRem(编辑器插件)

index.min.js lib-flexible(压缩源码)

!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);
复制代码

我个人一般习惯用webStorm这个编辑器以此编辑器为例 vsCode也可以找到对应的插件

file/settings

pxToRem设置.png

如果你的设计图为1920则将 font-size 设置为192 (font-size为设计图的1/10)

然后我们批量修改

webStorm批量修改 alt+j 选中所有px单位的元素 alt+d 批量修改.gif

修改后的 index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://juejin.cn/post/css/basic.css">
    <style>
        body{
            background: #f0f0f0;
        }
        /*版心*/
        .typeArea{width: 6.7708rem;margin: 0 auto;position: relative}
        .proList{
            padding:0.651rem 0;
            background: #fff;
        }
        .proList>.typeArea{
            display: flex;
            flex-wrap: wrap;
        }

        .proList>.typeArea>.production{
            width:1.6042rem;
            margin-right:0.1042rem;
            margin-top:0.296875rem;
        }
        .proList>.typeArea>.production>.imgContent{
            width:100%;
            height:1.09375rem;
        }
        .proList>.typeArea>.production>.imgContent>.img{
            width:100%;
            height:100%;
            object-fit: cover;
        }
        .proList>.typeArea>.production>.info{
            box-sizing: border-box;
            padding:0.1146rem 0.0417rem 0.1771rem;
            border-bottom:0.0052rem solid #ddd;
        }
        .proList>.typeArea>.production>.info>.title{
            font-size:0.09375rem;
            color: #535353;
        }
        .proList>.typeArea>.production>.info>.des{
            font-size:0.0729rem;
            color: #959595;
            margin-top:0.078125rem;
        }

        .proList>.typeArea>.production:nth-child(4n){
            margin-right:0;
        }
        .proList>.typeArea>.production:nth-child(-n+4){
            margin-top:0;
        }

    </style>
</head>

<body>
<div class="proList">
    <div class="typeArea">

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

    </div>
</div>
<script src="https://juejin.cn/post/js/index.min.js"></script>

</body>

</html>

复制代码

实现等比缩放效果

现在我们已经实现了等比缩放的效果.gif

手机端样式(iphone5)

随便取一个取手机端样式.png

手机端样式有点丑所以我们对手机端进行两列的布局

增加css代码

  @media(max-width:750px){

            .typeArea{width: 100%; box-sizing: border-box; padding:0 5%}

            .proList>.typeArea>.production{
                width:49%;
                margin-right:2% !important;
                margin-top:3% !important;
            }
            .proList>.typeArea>.production>.imgContent{
                height:auto;
            }
            .proList>.typeArea>.production:nth-child(2n){
                margin-right:0% !important;
            }
            .proList>.typeArea>.production:nth-child(-n+2){
                margin-top:0% !important;
            }
            .proList>.typeArea>.production>.info>.title{
                font-size:16px;
            }
            .proList>.typeArea>.production>.info>.des{
                font-size:13px;
            }


        }

复制代码

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://juejin.cn/post/css/basic.css">
    <style>
        body{
            background: #f0f0f0;
        }
        /*版心*/
        .typeArea{width: 6.7708rem;margin: 0 auto;position: relative}
        .proList{
            padding:0.651rem 0;
            background: #fff;
        }
        .proList>.typeArea{
            display: flex;
            flex-wrap: wrap;
        }

        .proList>.typeArea>.production{
            width:1.6042rem;
            margin-right:0.1042rem;
            margin-top:0.296875rem;
        }
        .proList>.typeArea>.production>.imgContent{
            width:100%;
            height:1.09375rem;
        }
        .proList>.typeArea>.production>.imgContent>.img{
            width:100%;
            height:100%;
            object-fit: cover;
        }
        .proList>.typeArea>.production>.info{
            box-sizing: border-box;
            padding:0.1146rem 0.0417rem 0.1771rem;
            border-bottom:0.0052rem solid #ddd;
        }
        .proList>.typeArea>.production>.info>.title{
            font-size:0.09375rem;
            color: #535353;
        }
        .proList>.typeArea>.production>.info>.des{
            font-size:0.0729rem;
            color: #959595;
            margin-top:0.078125rem;
        }

        .proList>.typeArea>.production:nth-child(4n){
            margin-right:0;
        }
        .proList>.typeArea>.production:nth-child(-n+4){
            margin-top:0;
        }

        @media(max-width:750px){

            .typeArea{width: 100%; box-sizing: border-box; padding:0 5%}

            .proList>.typeArea>.production{
                width:49%;
                margin-right:2% !important;
                margin-top:3% !important;
            }
            .proList>.typeArea>.production>.imgContent{
                height:auto;
            }
            .proList>.typeArea>.production:nth-child(2n){
                margin-right:0% !important;
            }
            .proList>.typeArea>.production:nth-child(-n+2){
                margin-top:0% !important;
            }
            .proList>.typeArea>.production>.info>.title{
                font-size:16px;
            }
            .proList>.typeArea>.production>.info>.des{
                font-size:13px;
            }


        }

    </style>
</head>

<body>
<div class="proList">
    <div class="typeArea">

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

    </div>
</div>
<script src="https://juejin.cn/post/js/index.min.js"></script>

</body>

</html>

复制代码

效果:

pc手机响应.gif

适应的原则

pc 采用rem布局

移动采用 vw/px/百分比 (根据布局变化采用不同的单位)

什么情况下会用到vw

我们取一个尺寸不统一的图片来放到这个案例身上

有时候图片的尺寸不一致但我们想实现宽高相等的情况下我们可以实现这个效果

因为pc的父元素高度写死了图片继承高度所以没发生形变

移动端的父元素高度由图片的自适应所以发生了变化

素材:

效果:

形变的图片.gif

继续修改代码

  @media(max-width:750px){

            .typeArea{
                width: 100vw;
                box-sizing: border-box;
                padding:5vw;
            }

            .proList>.typeArea>.production{
                width:44vw !important;
                margin-right:2vw !important;
                margin-top:2vw !important;
            }
            .proList>.typeArea>.production>.imgContent{
                height:44vw;
            }
            .proList>.typeArea>.production:nth-child(2n){
                margin-right:0% !important;
            }
            .proList>.typeArea>.production:nth-child(-n+2){
                margin-top:0% !important;
            }
            .proList>.typeArea>.production>.info>.title{
                font-size:16px;
            }
            .proList>.typeArea>.production>.info>.des{
                font-size:13px;
            }


        }
复制代码

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://juejin.cn/post/css/basic.css">
    <style>
        body{
            background: #f0f0f0;
        }
        /*版心*/
        .typeArea{width: 6.7708rem;margin: 0 auto;position: relative}
        .proList{
            padding:0.651rem 0;
            background: #fff;
        }
        .proList>.typeArea{
            display: flex;
            flex-wrap: wrap;
        }

        .proList>.typeArea>.production{
            width:1.6042rem;
            margin-right:0.1042rem;
            margin-top:0.296875rem;
        }
        .proList>.typeArea>.production>.imgContent{
            width:100%;
            height:1.09375rem;
        }
        .proList>.typeArea>.production>.imgContent>.img{
            width:100%;
            height:100%;
            object-fit: cover;
        }
        .proList>.typeArea>.production>.info{
            box-sizing: border-box;
            padding:0.1146rem 0.0417rem 0.1771rem;
            border-bottom:0.0052rem solid #ddd;
        }
        .proList>.typeArea>.production>.info>.title{
            font-size:0.09375rem;
            color: #535353;
        }
        .proList>.typeArea>.production>.info>.des{
            font-size:0.0729rem;
            color: #959595;
            margin-top:0.078125rem;
        }

        .proList>.typeArea>.production:nth-child(4n){
            margin-right:0;
        }
        .proList>.typeArea>.production:nth-child(-n+4){
            margin-top:0;
        }

        @media(max-width:750px){

            .typeArea{
                width: 100vw;
                box-sizing: border-box;
                padding:5vw;
            }

            .proList>.typeArea>.production{
                width:44vw !important;
                margin-right:2vw !important;
                margin-top:2vw !important;
            }
            .proList>.typeArea>.production>.imgContent{
                height:44vw;
            }
            .proList>.typeArea>.production:nth-child(2n){
                margin-right:0% !important;
            }
            .proList>.typeArea>.production:nth-child(-n+2){
                margin-top:0% !important;
            }
            .proList>.typeArea>.production>.info>.title{
                font-size:16px;
            }
            .proList>.typeArea>.production>.info>.des{
                font-size:13px;
            }


        }

    </style>
</head>

<body>
<div class="proList">
    <div class="typeArea">

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/otherImg.png" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

        <a class="production">
            <div class="imgContent">
                <img class="img" src="https://juejin.cn/post/images/pro1.jpg" >
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

    </div>
</div>
<script src="https://juejin.cn/post/js/index.min.js"></script>

</body>

</html>

复制代码

vw的适应

vw的适应.gif

手机端的字体一定要使用px 如果使用rem 会出现字体很小的情况根本没办法看

手机端的rem字体.png

常规的适应

手机端为pc等比缩小

有时候不需要写移动端但是pc的等比缩小又太难看了有没有什么好的方法
只需要修改meta标签即可

我们刚才写的案例是等于设备宽度的

原meta标签

 <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

将meta标签修改为

<meta name="viewport" content="user-scalable=yes">
复制代码

这时候手机端会采用980的分辨率不会触发 @media(max-width:750px)

自然是等比缩小的
手机可以双指放大所以不用担心字体看不起

移动的等比缩小.png

薛定谔的客户设备

你永远无法知道客户用什么分辨率跟你进行交流!

自适应虽然是好但是在以前没有总结出这些知识之前我真的是一个设备一个设备去调整的啊!!!

客户的设备尺寸

让客户的这玩意截图给你看

鼠标右键.png

微信截图_20210620182625.png

让客户设备调整至这个尺寸保证样式正常了

这里再提一个细节

1920 * 1080 文本100% google 实际显示尺寸高度只有947(书签加其他一些东西占掉了高度)

1920 * 1080 文本125% google 实际显示尺寸高度是 1519.2 * 759.18(滚动条高度+书签)

125%.png

实际的宽高必须要审查元素才知道而不是1920 * 1080 100% 拖动窗口…

其它浏览方法如果我们知道分辨率了例 1519.2 * 759.18 google浏览器还提供了其他方式

设置分辨率.png

设置参数.png

查看.png

这样就可以浏览各种分辨率的屏幕啦(记得修改Meta标签否则移动设备显示都是980)

常见分辨率

window能提供选择的都是常见分辨率字体缩放实际的高度都是不一样的…

常见分辨率.png

总结

案例github下载

以上文章的案例我放到github上了欢迎star

github.com/blank-flag/…

旧的项目可以实现等比缩小吗?

只要你的项目采取的是px单位就可以采用我这种方法实现自适应!!

vue/react 可以实现同样的效果吗?

vue开发同样可以实现类似的适应,但没这篇文章这么详细

可以参考我第一篇文章:

juejin.cn/post/696802…

(VUE2.X 使用lib-flexible px2rem-loader 实现1920*1080下的等比缩小)

我对react不太熟悉不过肯定都有对应的插件原理都是相同的

最后

以上就是我做了两年企业站总结的经验了

踩了无数多的坑总结出来的终极版适应指南

可能有大佬有更好的想法望不理赐教

欢迎转载记得标出处目前只在掘金发布

记得点赞收藏!

文章版权归作者所有，未经允许请勿转载。

THE END

前端

机器学习入门：多变量线性回归

IBM Lotus Notes 跨站脚本漏洞

iOS探索底层-cahce_t初探

想要写小清新的软文？一招让你的软文充满文艺范

00.邂逅Vue.js

金星影视 v2.8去广告版/聚合全网各种vip视频超清无广告

网站全尺寸适应指南

前言

以设计图为例

适应的原则

常规的适应

手机端为pc等比缩小

薛定谔的客户设备

客户的设备尺寸

常见分辨率

总结

案例github下载

旧的项目可以实现等比缩小吗?

vue/react 可以实现同样的效果吗?

最后

机器学习入门：多变量线性回归

IBM Lotus Notes 跨站脚本漏洞

iOS探索底层-cahce_t初探

想要写小清新的软文？一招让你的软文充满文艺范

00.邂逅Vue.js

金星影视 v2.8去广告版/聚合全网各种vip视频 超清无广告

网站全尺寸适应指南

前言

以设计图为例

适应的原则

常规的适应

手机端为pc等比缩小

薛定谔的客户设备

客户的设备尺寸

常见分辨率

总结

案例github下载

旧的项目 可以实现等比缩小吗?

vue/react 可以实现同样的效果吗?

最后

金星影视 v2.8去广告版/聚合全网各种vip视频超清无广告

旧的项目可以实现等比缩小吗?