Полноразмерное руководство по установке веб-сайта

внешний интерфейс
Полноразмерное руководство по установке веб-сайта

предисловие

Потому что сейчас я в основном пишу корпоративные сайты на заказ.

Воспользовавшись моим более глубоким пониманием адаптации сейчас, я заключаю

Если вы не сделаете что-то сейчас, вы не будете делать это в будущем!

Так что разбирайтесь с адаптацией по поводу компоновки

Вот некоторые из моих взглядов и мнений об адаптивном/отзывчивом

Чертежи дизайна и код (github предоставляет загрузку)

Возьмем в качестве примера дизайнерские чертежи

план 1920-х годов

设计图1920尺寸.png

1300 версия сердце

版心1300.png

Мы реализуем самую базовую компоновку в соответствии с проектным чертежом

материал:

pro1.jpg

стиль инициализации

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="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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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, установите размер шрифта на 192 (размер шрифта составляет 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="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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

    </div>
</div>
<script src="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="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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

    </div>
</div>
<script src="js/index.min.js"></script>

</body>

</html>

Эффект:

pc手机响应.gif

принципы адаптации

ПК принимает раскладку rem

Мобильные устройства используют vw/px/percentage (разные единицы измерения в зависимости от изменений макета).

Когда будет использоваться vw

Сделаем фото разного размера и наложим на этот чехол

Иногда размер изображения непостоянен, но мы можем добиться этого эффекта, когда хотим добиться одинаковой ширины и высоты.

Поскольку высота родительского элемента pc прописана насмерть, изображение наследует высоту, поэтому деформации нет

Высота родительского элемента на мобильной стороне изменена адаптацией изображения

материал:

otherImg.png

Эффект:

形变的图片.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="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="images/pro1.jpg" alt="">
            </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="images/otherImg.png" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </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="images/pro1.jpg" alt="">
            </div>
            <div class="info">
                <h3 class="title">家庭影院音响</h3>
                <p class="des">标准5.1环绕立体声结构音响系统</p>
            </div>
        </a>

    </div>
</div>
<script src="js/index.min.js"></script>

</body>

</html>

адаптация фольксвагена

vw的适应.gif

Шрифт на мобилке должен быть px.Если использовать rem то шрифт будет очень мелкий и его вообще не видно.

手机端的rem字体.png

регулярная адаптация

Мобильный терминал пропорционально уменьшен для ПК

Иногда не нужно писать мобильный терминал, но пропорциональное уменьшение ПК слишком некрасиво.Есть ли хороший способ? Просто измените метатег

Случай, который мы только что написали, равен ширине устройства

оригинальный метатег

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

meta.png

Измените метатег на

<meta name="viewport" content="user-scalable=yes">

В это время мобильный телефон будет использовать разрешение 980 и не будет запускать @media (max-width: 750px)

Естественно уменьшено Телефон может увеличивать масштаб двумя пальцами, так что не беспокойтесь о том, что шрифт смотрит вниз.

移动的等比缩小.png

клиентское устройство Шредингера

Никогда не знаешь, в каком разрешении с тобой общается твой клиент!

Хоть самонастройка это хорошо, но до того, как я обобщил эти знания, я действительно настроил ее по одному устройству!!!

Размер устройства клиента

Пусть клиентский скриншот этой штуки покажет вам

鼠标右键.png

微信截图_20210620182625.png

Позвольте клиентскому устройству настроиться на этот размер, чтобы убедиться, что стиль нормальный.

Вот еще одна деталь

1920*1080 текст 100% реальный размер и высота дисплея гугла всего 947 (закладки и прочее занимают высоту)

Snipaste_2021-06-20_18-32-09.png

1920 * 1080 текст 125% фактическая высота экрана Google составляет 1519,2 * 759,18 (высота полосы прокрутки + закладка)

125%.png

Фактическую ширину и высоту нужно узнать, проверив элемент вместо 1920 * 1080 100% перетаскивая окно...

Другие методы просмотра. Если мы знаем разрешение, например, 1519,2 * 759,18, браузер Google также предоставляет другие методы.

设置分辨率.png

设置参数.png

查看.png

Таким образом, вы можете просматривать экраны с различными разрешениями (не забудьте изменить метатег, иначе дисплей мобильного устройства будет 980).

общее разрешение

Параметры, которые может предоставить окно, - это все общие разрешения, масштабирование шрифта и фактическая высота различны...

常见分辨率.png

Суммировать

Кейс github скачать

Выкладываю кейс вышеуказанной статьи на github.Добро пожаловать звездочка

GitHub.com/blank-flag/…

Можно ли масштабировать старые проекты?

Пока ваш проект находится в единицах px, вы можете использовать мой метод для достижения самоадаптации!

Может ли vue/react добиться такого же эффекта?

Разработка Vue также может привести к аналогичным адаптациям, но не таким подробным, как в этой статье.

Вы можете обратиться к моей первой статье:

Наггетс.Талант/пост/696802…

(VUE2.X использует lib-flexible px2rem-loader для достижения пропорционального уменьшения до 1920*1080)

Я не очень хорошо знаком с реакцией, но должны быть соответствующие плагины, принцип тот же

наконец

Вышеизложенный опыт я обобщил в течение двух лет станции предприятия.

После того, как мы наступили на бесчисленные ямы, окончательный вариант руководства по адаптации подвел итоги.

Может быть, есть большие парни с лучшими идеями

Добро пожаловать в перепечатку и не забудьте указать источник. В настоящее время выпущено только в Nuggets.

Не забудьте поставить лайк и добавить в избранное!

Не забудьте поставить лайк и добавить в избранное!

Не забудьте поставить лайк и добавить в избранное!

Категории