CSS响应式布局

置顶页面仔小杨

已于 2022-03-04 18:00:48 修改

阅读量283

点赞数

CC 4.0 BY-SA版权

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

于 2022-03-04 17:56:55 首次发布

本文链接：https://blog.youkuaiyun.com/itxing666/article/details/123282273

CSS 专栏收录该内容

1 篇文章

订阅专栏

CSS布局

https://www.bilibili.com/video/BV1ov411k7sm

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

什么是媒体查询

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

示例：

  <style>
    .box {
      width: 200px;
      height: 200px;
    }
    @media screen and (min-device-width: 100px) and (max-device-width: 300px) {
      .box {
        background-color: red;
      }
    }
    @media screen and (min-device-width: 300px) and (max-device-width: 500px) {
      .box {
        background-color: green;
      }
    }
  </style>

屏幕尺寸在100px - 300px 背景颜色为red，300px-500px 背景颜色为green

@media常用参数

属性名称	作用
width、height	浏览器可视宽度、高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100%;
      height: 200px;
    }
    .box div {
      float: left;
      height: 100px;
    }
    .box div:nth-child(1) {
      background-color: pink;
    }
    .box div:nth-child(2) {
      background-color: green;
    }
    .box div:nth-child(3) {
      background-color: yellow;
    }
    @media screen and (min-width: 100px) and (max-width: 200px) {
      .box div {
        width: 100%;
      }
    }
    @media screen and (min-width: 200px) and (max-width: 400px) {
      .box div {
        width: 50%;
      }
    }
    @media screen and (min-width: 400px) {
      .box div {
        width: 33.33%;
      }
    }
  </style>

媒体查询其他引入方式1

  <style media="(min-width: 100px) and (max-width: 200px)">
    .box div {
      width: 100%;
    }
  </style>
  <style media="(min-width: 200px) and (max-width: 400px)">
    .box div {
      width: 50%;
    }
  </style>
  <style media="(min-width: 400px)">
    .box div {
      width: 33.33%;
    }
  </style>

媒体查询其他引入方式2

  <link rel="stylesheet" href="./test.css">
  <link rel="stylesheet" href="./media1.css" media="(min-width: 100px) and (max-width: 200px)">
  <link rel="stylesheet" href="./media2.css" media="(min-width: 200px) and (max-width: 400px)">
  <link rel="stylesheet" href="./media3.css" media="(min-width: 400px)">

什么是flex

FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

500

属性值	作用
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

主轴方向与换行

flex-direction: 子元素在父元素盒子中的排列方式

属性值	作用
row	默认值，按从左到有的顺序显示
row-reverse	与row相同，但是以相反的顺序
column	垂直显示，按从上到下的顺序
column-reverse	与column相同，但是以相反的顺序

503

flex-wrap：子元素在父元素盒子中是否换行

属性值	作用
nowrap	（默认）不换行（会自行压缩，即使子元素设置宽度）
wrap	换行/换列
wrap-reverse	换行/换列，但以相反的顺序

flex-flow：flex-direction和flex-wrap属性的简写方式,默认值 row nowrap

 flex-flow: <flex-direction> || <flex-wrap>;

剩余空间调整为间距

justify-content：定义子元素在父元素主轴上的对齐方式

属性	作用
flex-start	(默认值)左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个子元素两侧的间隔相等。所以，子元素之间的间隔比其与边框的间隔大一倍。
space-evenly	所有间隔匀称、平等

交叉轴的对齐方式

align-items：定义子元素在交叉轴上如何对齐

属性	作用
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	子元素的第一行文字的基线对齐
stretch(默认值)	如果子元素未设置高度或设为auto，将占满这个容器的高度

align-content：定义了多行的整体对齐方式。如果子元素只有一行，该元素不起作用

属性	作用
flex-start
flex-end
center
stretch	默认值
flex-between
flex-around

504

子元素的设置

属性值	作用
order	子元素的排列顺序。数值越小，排列越靠前，默认为0
flex-grow	子元素的放大比例，默认为0，即存在剩余空间，也不放大不为0时，即使有width，也会按照比例
flex-shrink	子元素的缩小比例，默认为1，即如果空间不足，子元素将缩小如果一个子元素为0，其他子元素为1，空间不足时，前者不缩小
flex-basis	分配多余空间之前，子元素占据主轴的宽度默认为auto，即子元素本身的宽度大小
flex	flex-grow`,`flex-shrink`和`flex-basis`的简写，默认值为`0 1 auto。 `auto` (`1 1 auto`) none (`0 0 auto`) `1` (`1 1 0%`)
align-self	单个子元素与其他元素对齐方式不一样 align-self: auto（默认值） \| flex-start \| flex-end \| center \| baseline \| stretch; }

flex简写

属性	作用
flex: auto;	flex: 1 1 auto;
flex: none;	flex: 0 0 auto;
flex: 1;	flex: 1 1 0%;
flex: 20%; \|\| flex: 200px;	flex: 1 1 20%; \|\| flex: 1 1 200px;
flex: 2 3;	flex: 2 3 0%;
flex: 2 200px;	flex: 2 1 200px;

rem

相对于根元素的字体大小的单位

使用媒体查询+rem或js,在不同宽度的视口下自动调整字体大小

自适应布局

根据设备类型跳转至移动端／PC端页面

  const userAgent = navigator.userAgent.toLowerCase();
  const deviceReg = /(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/
  window.location.href = deviceReg.test(userAgent) ? 'mobile.html' : 'pc.html'