雨落辰潇-文档站

Appearance

响应式布局 ​

① 阈值（断点） ​

常见方案一：

sh
640px
1080px

常见方案二：

css
768px
992px
1200px

阈值可能会不一样 导航的阈值和页脚的阈值不一样。

② 移动优先方案（媒体查询的设置） ​

css
.container {
    width: 100%;
    height: 200px;
    background: #900;
}

/* 小屏幕 */
@media (min-width:768px) {
    .container {
        margin-left: auto;
        margin-right: auto;
        width: 750px;
        background: #090;
    }
}

/* 中等屏幕 */
@media (min-width: 992px) {
    .container {
        width: 970px;
        background: #099;
    }
}

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
        background: #990;
    }
}

③ 响应式图片 ​

方案一： 多个图片控制隐藏显示

css
<!--html样式-->
.small-logo {
     display: block;
}

.middle-logo {
    display: none;
}

.large-logo {
    display: none;
}

@media (min-width: 640px) {
     .small-logo {
         display: none;
     }

     .middle-logo {
         display: block;
     }

     .large-logo {
         display: none;
     }
}

@media (min-width: 1024px) {
    .small-logo {
        display: none;
    }

    .middle-logo {
        display: none;
    }

    .large-logo {
        display: block;
    }
}

方案二： 背景图

css
/*css样式*/
.logo {        
    background-image: url(./images/Brand-S.png);
}

@media (min-width: 640px) {
    .logo {
        background-image: url(./images/Brand-M.png);
    }
}

@media (min-width: 1024px) {
     .logo {
         background-image: url(./images/Brand-L.png);
     }
}

方案三 使用 picture 标签

html
<!-- （html样式）哪个source先满足条件就先加载哪个图片，后面的将不再加载 -->
<picture>
    <source srcset="./images/Banner-S.png" media="(max-width:640px)">
    <source srcset="./images/Banner-M.png" media="(max-width:1024px)">
    <img src="./images/Banner-L.png" alt="">
</picture>


对picture设置样式的时候，只需要设置img的属性就可以
.img{
	//参照父元素100%
	width:100%
}

方案四 使用 img 标签的 srcset 属性

html
<img srcset="./images/Banner-S.png 640w,
             ./images/Banner-M.png 1024w, 
             ./images/Banner-L.png 1440w"
     src="./images/Banner-L.png" 
     alt="">
注：图片地址后面的长度是图片的宽度，不是视口的宽度，父元素此时默认100%，与视口同宽，视口小于640时，选择小图，以此类推。  src="./images/Banner-L.png"表示默认情况下（即大于1440时），也用大图，防止用户屏幕过大。

④ 响应式导航 ​

BFC ​

什么是 BFC ​

Block Formatting Context 简称 BFC，中文翻译为 块级格式上下文。

① W3C 中对 BFC 的定义 ​

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

译文：

浮动、绝对定位元素、不是块盒子的块容器(如inline-blocks、table-cells和table-captions)，以及overflow属性的值除visible以外的块盒(除非该值已传播到视口)，将为其内容建立新的块格式化上下文。

https://www.w3.org/TR/CSS22/visuren.html#block-formatting

② MDN 上对 BFC 的定义 ​

A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.

译文：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

③ 到底什么是 BFC ​

首先，BFC 的意思是 Block Formatting Context ，即块级格式上下文。 然后，当元素满足了某些条件，我们认为该元素创建了 BFC。 创建了 BFC 的元素我们可以把他看做是一个独立的容器，容器内的元素不论如何布局都不会影响到外面。

创建 BFC 的方式 ​

  • 根元素。
  • 浮动元素。
  • 绝对定位或固定定位的元素。
  • 行内块元素。
  • 表格单元格（th、td）、表格行（tr）、表格标题（caption）、table、thead、tbody、tfoot。
  • overflow 的值不为 visible 的块元素。
  • 伸缩项目。
  • 多列容器。
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。
css
/* 创建BFC */
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
/* display: table;
display: table-cell; */
/* overflow: scroll; */
/* column-count: 1; */ 分列布局（容器） 设置列数为1 
column-span: all;

创建 BFC 可以解决的问题 ​

① 清除子元素浮动的影响 ​

给浮动元素的父元素创建 BFC，清除掉子元素浮动的影响。

② 解决外边距塌陷 ​

给父元素创建 BFC，第一个和最后一个子元素的外边距不会塌陷。

什么是BFC

名称：中文翻译+那些方式创建BFC+解决的问题。

解决问题创建概念

人为设计的原理。

Copyright © 2024 雨落辰潇