响应式web设计：（媒体查询，弹性盒子模型）

最新推荐文章于 2024-10-04 20:47:51 发布

网工小C

最新推荐文章于 2024-10-04 20:47:51 发布

阅读量1.9k

点赞数 2

分类专栏：响应式web 弹性盒子文章标签：前端 css html

本文链接：https://blog.csdn.net/Turkey_C/article/details/127403136

版权

本文介绍了响应式Web设计的基本概念，包括视口、媒体查询和百分比布局。详细讲解了媒体查询的用法以及如何通过设置CSS属性实现响应式布局。此外，还探讨了弹性盒模型及其display、flex-flow、justify-content、align-items等关键属性，展示了如何利用这些属性实现动态布局调整。

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

一，什么是响应式web设计

响应式web设计需要考虑页面在PC端和移动端设备上的呈现效果，而移动端页面的显示效果与移动端口的视口有关。

1.视口

（1）布局视口：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会在手机浏览器中出现滚动条，用户需要左右滑动条才能查看完整的一行内容。

（2）理想视口：顾名思义，就是可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

HTML5中，将<meta>标签中的name属性设为viewport，即可设置视口
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">
use-scalable用于设置用户是否可以缩放，默认为yes；

width=device-width用于设置布局视口的宽度；

initial-scale用于设置初始缩放比例，取值0.0~10.0；

maximum-scale用于设置最大缩放比例，取值为0.0~10.0；

除此之外，还可以通过height属性设置布局视口的高度，minimum-scale设置最小缩放比例。

2.媒体查询

CSS3的Media Query媒体查询用来根据窗口宽度，屏幕比例和设备方向等差异来改变页面的显示方式。具体示例代码如下：
<style>
@media screen and (max-width:960px) {
  /*样式设置*/
}
</style>

通过一个案例演示如何使用媒体查询实现网页背景颜色在不同尺寸屏幕的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">
		<title></title>
		<style type="text/css">
			body{
				background-color: red;
			}
			/* 超小屏幕*/
			@media screen and (min-width:575px) {
				body{
					background-color: blue;
				}
			}