【前端基础】17.响应式布局

menghen113

于 2022-09-19 21:07:10 发布

阅读量286

点赞数 1

分类专栏：前端学习文章标签：前端 css css3

本文链接：https://blog.csdn.net/menghen113/article/details/126942101

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频

1.响应式布局

页面设计在不同设备的显示情况。
布局只用float+定位，不使用flex。
不能很好的使用rem作为设计单位。
掌握响应式布局，弹性等常见布局。

课程安排
· css中媒体查询的作用和使用方法。
· flex弹性盒子的用法。
· rem的作用和使用方法。
· 响应式布局，弹性布局等六个课程案例。

课程的收获
· 掌握利用媒体查询并在移动端设计中使用。
· 掌握flex及其定义伸缩比例的方法。
· px,%,em,rem的区别和使用
· 掌握常见布局的设计方法。

学习方法
· 充分利用开发者工具。
· 多做各种测试并观察浏览器渲染效果。
· 先分析计算，在运行观察效果。

2.什么是媒体查询

概念：为不同尺寸的屏幕设定不同的css样式。

3.@media常用参数

width,height 浏览器可视宽度，高度
device-width 设置屏幕的宽度
device-height 设置屏幕的高度

        #div0{
            width: 100%;
            height: 500px;
        }
        #div0 div{
            float: left;
            height: 100px;
        }
        /* 1行3个div */
        @media screen and (min-device-width:400px){
            #div0 div{
                width: 33.3%;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: blue;
            }
            #div0 div:nth-child(3){
                background-color: green;
            }
        }
          /* 2行3个div */
          @media screen and (min-device-width:300px) and (max-device-width:399px){
            #div0 div{
                width: 50%;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: blue;
            }
            #div0 div:nth-child(3){
                background-color: green;
            }
            
        }
          /* 3行3个div */
          @media screen and (min-device-width:200px) and (max-device-width:299px){
            #div0 div{
                width: 100%;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: blue;
            }
            #div0 div:nth-child(3){
                background-color: green;
            }
            
        }

4.媒体查询其他引入方式-1

style标签写在style标签中，有条件的指向某个内部样式表。

5.媒体查询其他引入方式-2

link引入写在link标签中，有条件的引入外部样式表。

6.flex

什么是flex
flexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。
为什么用flex
用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。
更加符合响应式设计的特点。

flex-direction

作用子元素在父元素盒子中的排列方式。
row 默认值，按从左到右的顺序显示
row-reverse 与row相同，但是以相反的顺序
column 灵活的项目将垂直显示，按从上到下的顺序
column-reverse 与column相同，但是以相反的顺序

flex-wrap

子元素在父元素盒子中的是否换行（列）
nowrap 默认值，不换行或不换列
wrap 换行或换列
wrap-reverse 换行或换列，但以相反的顺序

flex-flow

flex-direction和flex-wrap属性的简写形式

justify-content

flex-start 默认值。从左到右，挨着行的开头。
flex-end 从右到左，挨着行的结尾。
center 居中显示
space-between 平均分布在该行上，两边不留间隙空间
space-around 平均分别在该行上，两边留有一半的间隙空间。

align-item

align-items 设置每个flex元素在交叉轴上的默认对齐方式
flex-start 位于容器开头
flex-end 位于容器结尾
center 居中显示

align-content

设置每个flex元素在交叉轴上的默认对齐方式
flex-start 位于容器的开头
flex-end 位于容器的结尾
center 位于容器的中心
space-between 之间留有空白
space-around 两端都留有空白

7.其他属性

flex-basis 设置弹性盒伸缩基准值
flex-grow 设置弹性盒子的扩展比率，，不足以填充，有很多剩余空间，可以通过数字设置比率
flex-shrink 设置盒子的缩小比率，，总宽度比较宽，flex-shrink: 0 不允许缩小
flex flex-grow,flex-shrink,flex-basis的缩写