css媒体查询

最新推荐文章于 2024-11-11 00:01:33 发布

qq_59747893

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量63

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/qq_59747893/article/details/124089548

版权

本文深入探讨了媒体查询在响应式页面布局中的应用，详细解释了不同设备分辨率的断点设置。同时，介绍了Flex布局的基本概念、应用场景以及如何替代传统的浮动布局。在Flex布局中，重点讲解了主轴与交叉轴的概念，以及容器和项目属性的设置，如`flex-direction`、`justify-content`和`align-items`等。此外，还提到了Flex布局在移动端布局和项目排序中的优势。

摘要由CSDN通过智能技术生成

媒体查询：
作用：实时捕获设备的分辨率
场景：响应式页面布局

手机：<768px
平板:>=768 --- <= 991px
普通pc ： >=992px ---- <= 1199px
pc ： >1200px
@media
not
only
and

mediatype:
screen
print
speech
。。。

@media [not|only] srceen and (express) and (express)....{
   选择器{

   }
   选择器{

   }
   .....
}
根据分辨率引入css文件:
<link href="" media="srceen and (express) and (express)" rel="stylesheet" />
import "xxx.css"

flex布局(弹性布局)：
display:inline|inline-block|block|hone|flex;
display:flex;
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

使用：
1、移动端布局排版(手机)
2、替代部分 float 布局

弹性盒子的内部元素排列：
X 主轴（默认）
Y 交叉轴(从轴)

****依据主轴的方向进行排列。***

容器属性：
flex-direction：设置主轴的对齐方向（row|row-reverse|column|column-reverse）
flex-wrap:项目排列是否换行（no-wrap|wrap）
flex-flow：简写模式主轴+换行 row no-wrap;
justify-content:项目在主轴上的对齐方式（center|flex-start|flex-end|space-around|space-betheew）
align-items:项目在交叉轴上的对齐方式（center|flex-start|flex-end）
align-content：多跟轴线上的对齐方式

项目属性：
order: 排序默认 0 排序值越小越靠前
flex-grow：成长比默认 0 number;
flex-shrink:缩小比默认 1 0（不缩小）
flex-basis：auto
flex：简写方式 flex-grow+flex-shrin [flex-basis]
align-self：项目在交叉轴的对齐方式