响应式布局

最新推荐文章于 2024-06-28 21:22:19 发布

小豪boy

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量214

点赞数

分类专栏：移动Web开发前端学习笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_34771938/article/details/120693070

版权

前端学习笔记同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

移动Web开发

7 篇文章 1 订阅

订阅专栏

一、概述

响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

二、媒体查询

1. 什么是媒体查询？

媒体查询：通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。媒体查询是响应式网页设计的关键部分，因为它允许您根据视口的大小来创建不同的布局。

2. 媒体查询语法

@media mediatype and|not|only|, (media feature) { /* css-code; */ }
and 可以将多个媒体特性链接到一块，相当与且
not 排除某个媒体特性，相当于非
only 指定某个特定的媒体类型
, 设备列表，相当于或

3. 媒体类型

你可以指定的媒体类型可能是：

all：用于所有设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等
speech：用于屏幕阅读器等发声设备

4. 媒体特征表达式

width/max-width/min-width：输出设备中的页面可见区域宽度
-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio：设备像素比 dpr
orientation：landscape（横屏）/ portrait（竖屏）
height：高度
device-width/device-height
screen.width/screen.height
aspect-ratio 视口的宽高比

5. 媒体查询策略

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>3.8 媒体查询--策略</title>
    <style>
        /*css reset*/
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        body {
            padding-top: 200px;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .row {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        .col {
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: rgba(86, 61, 124, 0.15);
            border: 1px solid rgba(86, 61, 124, 0.2);
        }

        /*
            断点
                xs: < 576px
                sm: 576px ~ 768px
                md: 768px ~ 992px
                lg: 992px ~ 1200px
                xl: > 1200px
            断点怎么来的
                改变屏幕大小，当页面显示不正常的时候，你就需要设置断点了
                经验值
                    预设一些
        */
        /*@media (max-width: 576px) {
            .col {
                width: 100%;
            }
        }
        @media (min-width: 577px) and (max-width: 768px) {
            .col {
                width: 50%;
            }
        }
        @media (min-width: 769px) and (max-width: 992px) {
            .col {
                width: 25%;
            }
        }
        @media (min-width: 993px) and (max-width: 1200px) {
            .col {
                width: 16.6666666667%;
            }
        }
        @media (min-width: 1201px) {
            .col {
                width: 8.333333333%;
            }
        }*/

        /*pc first*/
        /*.col {
            width: 8.333333333%;
        }
        @media (max-width: 1200px) {
            .col {
                width: 16.6666666667%;
            }
        }
        @media (max-width: 992px) {
            .col {
                width: 25%;
            }
        }
        @media (max-width: 768px) {
            .col {
                width: 50%;
            }
        }
        @media (max-width: 576px) {
            .col {
                width: 100%;
            }
        }*/

        /*mobile first*/
        .col {
            width: 100%;
        }
        @media (min-width: 576px) {
            .col {
                width: 50%;
            }
        }
        @media (min-width: 768px) {
            .col {
                width: 25%;
            }
        }
        @media (min-width: 992px) {
            .col {
                width: 16.6666666667%;
            }
        }
        @media (min-width: 1200px) {
            .col {
                width: 8.33333333%;
            }
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
        <div class="col">
            <img src="img/3.8-1.png" alt="">
        </div>
    </div>
</body>
</html>

三、栅格系统

1. 什么是栅格系统

栅格系统英文为Grid Systems，也有人翻译为网格系统，运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。

2. 栅格基础七要素

2.1、最小单位

需要先定好界面的单位基础，后续内容元素和布局规则都是基于它整数倍递增。

网页端最小单位：10
移动端最小单位：3、4、5

2.2、总宽度 W

总宽度：对整体布局进行规范，且还可以保证设计尺寸的统一性。
界面设计要有具体尺寸，由于内容多少不确定，所以高度没有办法定死，但内容区的宽度是可以定的。

2.3、列数 N

列数是界面总宽度设定好后，纵向等分成几列。

网页端：12列、24列（常用等分列数，当然不是固定的，需要根据自己的内容设定列数）
移动端：6列（常用等分列数）

2.4、大列宽 L

把界面总宽度等分成几列，每一列的宽度即为大列宽。计算公式：L = W / N（大列宽包含：列宽和水槽）。

2.5、水槽 G

相邻两个列宽之间的间隔是水槽。水槽宽度越大，页面留白和呼吸感会更好，反之则更紧凑。水槽可以将内容更规范的区分开来。

2.6、列宽 C

把界面总宽度等分成列，相邻两列之间的间隔（水槽）减去后就是列宽。

2.7、安全边距 M

界面左右能保证可读性和美观度的、合适的空隙就是安全边距。计算公式：M = G / 2（安全边距是水槽的0.5倍）。
除了使用水槽的0.5倍，还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例：水槽是20，使用0.5倍，安全边距为10；水槽是20，使用2.0倍，安全边距为40。

参考链接：

http://static.kancloud.cn/dodoke/mobile-web-tutorial/1549069

小豪boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

一、概述响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。二、媒体查询1. 什么是媒体查询？媒体查询：通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。媒体查询是响应式网页设计的关键部分，因为它允许您根据视口的大小来创建不同的布局。2.媒体查询语法@media mediatype and|not|only|, .
复制链接

扫一扫

专栏目录