布局+媒体查询

最新推荐文章于 2024-01-20 22:10:58 发布

tianfen_auster

最新推荐文章于 2024-01-20 22:10:58 发布

阅读量158

点赞数

分类专栏： H5入门基础文章标签： html5

本文链接：https://blog.csdn.net/tianfen_auster/article/details/111576631

版权

H5入门基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

布局方式

PC端-三栏布局

圣杯

        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 50px;
            /* 设置body的最小宽度 */
            min-width: 620px;
            /* 设置body的最大宽度 */
            max-width: 1000px;
        }
        header,
        footer {
            width: 100%;
            height: 100px;
            background-color: tan;
            text-align: center;
            line-height: 100px;
        }
        /* center，left，right都浮动 */
        .left,
        .right,
        .center {
            float: left;
            height: 400px;
            text-align: center;
            line-height: 400px;
        }
        /* 清除浮动 */
        .clearfix::after {
            clear: both;
            display: block;
            content: "";
        }
        /* 左右两侧宽度固定 */
        .left,
        .right {
            width: 200px;
        }
        /* center宽度为100% */
        .center {
            width: 100%;
            background-color: teal;
        }
        /* left通过margin-left为负值（-100%），移动到center最左边 */
        .left {
            margin-left: -100%;
            background-color: thistle;
            /* leftt相对定位，移动到相应的位置。位移量为自身的宽度。 */
            position: relative;
            left: -200px;
        }
        /* right通过margin-left为负值（自身的宽度），移动到center的最右边。 */
        .right {
            margin-left: -200px;
            background-color: tomato;
            /* right相对定位，移动到相应的位置。位移量为自身的宽度。 */
            position: relative;
            right: -200px;
        }
        /* 最外层div添加一个padding，padding的宽度为left，right的宽度 */
        .clearfix {
            padding: 0px 200px;
        }

    <header>header</header>
    <div class="clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>

在这里插入图片描述
总结：
1.在主体内部外面嵌套了一个div
2.center在结构上靠前
3.center，left，right都浮动
4.清除浮动
5.center宽度为100%，left，right宽度固定
6.left通过margin-left为负值（-100%），移动到center最左边
7.right通过margin-left为负值（自身的宽度），移动到center的最右边。
8.center的内容会被left，right遮盖
9.最外层div添加一个padding，padding的宽度为left，right的宽度。
10，left，right相对定位，移动到相应的位置。位移量为自身的宽度。

圣杯：外盒子的padding+left right的相对定位

双飞翼

        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 50px;
            /* 设置body的最小宽度 */
            min-width: 620px;
            /* 设置body的最大宽度 */
            max-width: 1000px;
        }
        header,
        footer {
            width: 100%;
            height: 100px;
            background-color: tan;
            text-align: center;
            line-height: 100px;
        }
        /* 让left right center浮动 */
        .left,
        .right,
        .center {
            float: left;
            height: 400px;
            text-align: center;
            line-height: 400px;
        }
        /* 左右两侧宽度固定 */
        .left,
        .right {
            width: 200px;
        }
        /* center宽度为100% */
        .center {
            width: 100%;
            background-color: teal;
        }
        /* 设置left的margin-left为负值（-100%），移动到center最左边 */
        .left {
            margin-left: -100%;
            background-color: thistle;
        }
        /* 设置right的margin-left为负值（负的自身宽度），移动到center的最右边。 */
        .right {
            margin-left: -200px;
            background-color: tomato;
        }
        footer {
            clear: both;
        }
        /* 为这个div添加一个margin，左右margin的值为left right的宽度。 */
        .home {
            margin: 0 200px;
        }

    <header>header</header>
    <div class="center">
        <div class="home">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <footer>footer</footer>

在这里插入图片描述 总结：

1.center在结构上靠前
2.center，left，right都浮动
3.center宽度为100%，left，right宽度固定
4.left通过margin-left为负值（-100%），移动到center最左边
5.right通过margin-left为负值（自身的宽度），移动到center的最右边。
6.在center中添加一个div，将内容写在这个div中
7.为这个div添加一个margin，左右margin的值为left right的宽度。

双飞翼布局：子盒子的margin

弹性盒子

        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 50px;
            /* 设置body的最小宽度 */
            min-width: 620px;
            /* 设置body的最大宽度 */
            max-width: 1000px;
        }
        header,
        footer {
            width: 100%;
            height: 100px;
            background-color: tan;
            text-align: center;
            line-height: 100px;
        }
        /* 将home设置为弹性盒子 */
        .home {
            display: flex;
            width: 100%;
            height: 400px;
            font-size: 50px;
            line-height: 400px;
            text-align: center;
        }
        /* left right 固定宽度 */
        .left,
        .right {
            width: 200px;
            background-color: brown;
        }
        /* 调整顺序，left：1 center：2 right：3 */
        .left {
            order: 1;
        }
        .center {
            order: 2;
        }
        .right {
            order: 3;
        }
        /* center不设置宽度 , 将center设置为 flex-grow: 1; */
        .center {
            flex-grow: 1;
            background-color: cadetblue;
        }

    <header>header</header>
    <div class="home">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>

在这里插入图片描述
1.添加一个最外层的div home
2.将home设置为弹性盒子
3.left right 固定宽度 center不设置宽度
4.将center设置为 flex-grow: 1;
5.调整顺序，left：1 center：2 right：3

视口

分辨率

分辨率：屏幕中像素的数量， PC端常见的分辨率：1920*1080。

手机分辨率一般比较高。
问题：
如果用手机的真实分辨率去呈现网页，网页整体看起来会特别小。

苹果，乔布斯在推出iPhone4的时候，为了让页面完整显示在手机上，推出了视口这个概念,让手机浏览器默认为980px。当前这个980就是视口的宽度。

视口分类

布局视口网页的宽度
视觉视口用户可以看到的网站的区域
理想视口视觉视口=布局视口

eg:

<!-- 让不同的设备自适应理想视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 自定义视口的宽度 -->
<meta name="viewport" content="width=300px">

不同的移动设备因为分辨率，屏幕尺寸等问题，造成视觉视口不同，那么理想视口也会不同。

移动端

移动端布局：
1.响应式
2.分别开发两套代码

媒体查询

设备

屏幕：PC 、手机端
打印机
屏幕阅读器

尺寸

常见尺寸 320-420之间

布局

响应式网页：同一个网页，在不同的条件下，使用不同的样式。
rem/百分比：等比例缩放。

min-width/max-width

使用min-width时，通常将小的条件放在前面。
使用max-width时，通常将大的条件放在前面。

实现方式

内嵌式

格式：

  @media 设备名 逻辑关键词（and or not）（条件）{
           样式；
   }

eg:

        /* 设备是屏幕设备  宽度小于等于1500px  */
        @media screen and (max-width:1500px) {
            body {
                background-color: brown;
            }
        }

        /* 设备是屏幕设备  宽度大于等于1200px  */
        
        @media screen and (min-width:600px) {
            body {
                background-color: cadetblue;
            }
        }

外链式
通过link标签引入样式，再通过media属性设置样式引用的条件。

格式：

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

逻辑关键字

and ，满足多个条件
, ，多个条件中满足一个条件
not ，逻辑非只要不满足条件就会生效

逻辑或

        /* 使用，隔开条件 */
        /* 打印设备 或者 宽度大于等于1200px */
        @media print ,(min-width: 1200px) {
            h1{
                color: brown;
            }
        }

逻辑非

        @media not screen {
            h1{
                color: brown;
            }
        }

设备方向

orientation 属性可以定义设备的方向

portrait 竖屏设备，高度大于宽度
landscape 横屏设备，宽度大于高度

常见的查询特性：

orientation ： landscape（横屏设备）、portrait（竖屏设备）
width ：设备的宽度
height ：设备的高度
min-width ：最小宽度
max-width ：最大宽度
min-height ：最小高度
max-height ：最大高度

eg:横屏设备并且宽度大于580时，背景色为红色。

        @media screen and (orientation:landscape) and (min-width:580px) {
            body {
                background-color: brown;
            }
        }