响应式布局的应用

最新推荐文章于 2023-05-15 20:13:36 发布

致我们喂了狗的青春

最新推荐文章于 2023-05-15 20:13:36 发布

阅读量291

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/Aloun/article/details/107111675

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

- - 响应式布局
  - - 弹性布局

响应式布局

弹性布局

为什么使用弹性布局

有的网站设计还在使用固定宽度(如960px),期望给所有终端用户带来较为一致的浏览体验.这种固定宽度设计在笔记本上显示刚好,而在部分高分辨率显示器上却会在两边多出些空白,这样的网页给高分辨率用户的体验是极差的,而弹性布局刚好解决了这个bug.

实现弹性布局的方法

浮动+百分比布局

.box{
    border: 1px solid red;
    width: 100%;
	padding:10px;
}
aside{
    float:left;
    width: 30%;
	background:red;
	padding:10px;
}
article{
	width:65%;
	margin-left:10px;
	float:left;
	background:yellow;
}

Flex布局

Flex布局是在CSS3中引入的,又称为弹性盒模型.该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.

Flex布局对于设计比较复杂的页面非常有用,可以轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖浮动布局实现元素位置的定义以及重置元素的大小

Flex布局主要有以下几点功能:
- 在屏幕和浏览器窗口大小发生改变时也可以灵活地调整布局.
- 控制元素在页面的布局方向
- 按照不同于文档对象模型(DOM)所指定的排序方式对屏幕上的元素重新排序.
```
/*弹性布局语法*/
.box{
	display:flex;
	border:1px solid red;
	padding:10px;
}
```
综合弹性盒模型的好处如下:
- 可以让盒子里面的元素排在一行
- 盒子里面元素的高度相同
弹性盒模型的其他属性:
- 伸缩性 flex
```
/*父容器*/
.box{
    border: 1px solid red;
    width: 60%;
    height: 400px;
    /*将父容器变成 flex容器*/
    display: flex;
}
.div1{
    /*占用父级容器的总宽度*/
    /*width: 40%;*/
    /*占父容器的占比 1*/
    flex: 1;
    height: 300px;
    background-color: yellow;
    float: left;
}
.div2{
    /*width: 60%;*/
    /*占父容器的占比 2*/
    flex: 2;
    height: 400px;
    background-color: red;
    float: left;
}
/*解决父级边框塌陷问题*/
.clear:after{
    clear: both;
    content: '';
    display: block;
}
```
- 伸缩流方向 flex-direction
  
  flex-direction属性决定主轴的方向(即项目的排列方向),可以很简单地将多个元素的排列方向从水平方向修改为垂直方向,或者从垂直方向修改为水平方向
```
flex-direction:row | row-reverse | column | column-reverse
.box{
	display:flex;
	flex-direction:column;
	border:1px solid red;
	padding:10px;
}
```
  - row:主轴为水平方向,起点为左端,即网页元素排版方式从左到右排列(默认值)
  - row-reverse:主轴为水平方向,起点在右端.与row排列相反,元素从右到左排列.
  - column:主轴为垂直方向,起点在上端,类似于row,不过是从上到下排列.
  - column-reverse:主轴为垂直方向,起点在下端.类似row-reverse,不过是从下到上排列
- 伸缩换行 flex-wrap
  
  flex-wrap属性适用于伸缩容器,也就是伸缩项目的父元素,主要是用来定义伸缩容器里是单行还是多行显示.侧轴的方向决定了新行堆放的方向、
```
flex-wrap:nowrap | wrap | wrap-reverse
```
  - nowrap:默认值,伸缩容器单行显示,伸缩项目不会换行.
  - wrap:伸缩容器多行显示,伸缩项目会换行
  - wrap-reverse:伸缩容器多行显示,伸缩项目会换行,并且颠倒行顺序
- 主轴对齐 justify-content
  
  justify-content属性适用于伸缩容器,也就是伸缩项目的父元素.主要用来定义伸缩项目在主轴上的对齐方式
```
justify-content: flex-start | flex-end | center | space-between | space-around
```
  - flex-start:伸缩项目向一行的起始位置靠齐
  - flex-end:伸缩项目向一行的结束位置靠齐
  - center:伸缩项目向一行的中间位置靠齐
  - space-between:伸缩项目会平均分布在行里,第一个伸缩项目在一行中的最开始位置,最后一个伸缩项目在一行的最终点位置
  - space-around:伸缩项目会平均分布在行里,两端保留一半的空间
- 侧轴对齐align-items
  
  align-items 属性定义伸缩项目在侧轴上的对齐方式.align-items和justify-content相呼应,可以把它想象成侧轴(垂直于主轴)的justify-content.
```
align-items: flex-start | flex-end | center | baseline | stretch
```
  - flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边
  - flex-end:伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边
  - center:伸缩项目的外边距盒在该行侧轴上居中放置
  - baseline:伸缩项目根据伸缩项目第一行文字的基线对齐
  - stretch:默认值.伸缩项目拉伸填充整个伸缩容器

媒体查询

媒体查询是向不同设备提供不同样式的一种不错的方式,它为每种类型的用户提供了最佳的体验效果,要使用媒体查询来制作网页,首先需要学习三个属性:媒体类型,媒体特性和关键词.

1.媒体类型

媒体类型(Media Type)在CSS2中是一个常见的属性,可以通过媒体类型对不同的设备指定不同的样式

在CSS2中常遇到的媒体类型是all(全部),screen(屏幕),print(页面打印或打印预览模式),W3C共列出十种媒体类型

值	设备类型
all	所有设备
braille	盲文触觉回馈设备
embossed	盲文打印机
handheld	便携设备
print	打印用纸或打印预览视图
projection	投影设备
screen	电脑显示器
speech	语音或音频合成器
tv	电视机设备
tty	使用固定密度字母栅格的媒介,如电传打印机和终端

企业中最常用的就是all,screen,print三种,不过媒体类型引入方式常用的有两种

@media方式

我们可以用@media的方式引入,@media是CSS3中新引入的一个特性,称为媒体查询.

@medid 媒体类型{
	选择器{ /*你的样式代码写在这里...*/}
}
例:
@media screen{
    .box{
        background-color: yellow;
    }
    li{
        color: black;
    }
}

link方法

link方法引入媒体类型其实就是在标签引入样式的时候,通过link标签中的media属性来指定不同的媒体类型
```
<link rel="stylesheet" herf="style.css" media="媒体类型"/>
```

2.媒体特性

媒体特性(Media Query)是CSS3对媒体类型(Media Type)的增强版,其实可以将Media Query看成"Media Type(判断条件)+CSS(符合条件的样式规则)"

属性	值	min/max	描述
device-width	length	Yes	设置屏幕的输出宽度
device-height	length	Yes	设置屏幕的输出高度
width	length	Yes	渲染界面的宽度
height	length	Yes	渲染界面的高度
orientation	portrait/landscape	No	横屏或竖屏
resolution	分辨率(dpi/dpcm)	Yes	分辨率
color	整数	Yes	每种色彩的字节数
color-index	整数	Yes	色彩表中的色彩数

Media Query能在不同的条件下使用不同的样式,使页面在不同终端设备下达到不同的渲染效果

@media 媒体类型	and (媒体特性){ CSS样式 }
例:
@media screen and (max-width: 639px){
    .box{
        background-color: yellow;
    }
    li{
        color: black;
    }
}

3.关键词

媒体特性有的时候不止一条,当出现多个条件并存的时候,就需要通过关键词连接.