浅谈响应式布局

时间 2019-11-17

标签浅谈响应布局繁體版

原文原文链接

响应式布局应该包括如下几点：css

一、CSS3.0媒介查询；html

咱们所作的html文件都是在浏览器的解析下显示的，在PC端，在手机浏览器中都是能够的，惟一所不一样的就是浏览器的视界窗口不一样而已。在css3中使用媒体查询，能够在不改变页面内容的状况下，为特定的一些输出设备定制显示效果。咱们所要作的就是在页面中的<head>标签之中加入<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ；前端

固然咱们的css3媒介查询是创建在支持css3的基础上，支持CSS3的浏览器的状况看下图；css3

再看下css3.0媒介查询的使用，经过在不一样宽度的状况下，使用不一样的样式，页面自适应布局；浏览器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0">
	<title>改变窗口大小有惊喜</title>
	<style type="text/css">
		body {
			background-color: grey;
		}
		@media screen and (max-width: 960px) {
			body {
				background-color: red;
			}
		}
		@media screen and (max-width: 768px) {
			body {
				background-color: orange;
			}
		}
		@media screen and (max-width: 550px) {
			body {
				background-color: yellow;
			}
		}
		@media screen and (max-width: 320px) {
			body {
				background-color: green;
			}
		}
	</style>
</head>
<body>
<p>改变窗口大小有惊喜哟！</p>
</body>
</html>

二、百分比对应绝对像素宽度；布局

在响应式布局中，咱们通常会使用max-width属性来约束页面的最大宽度，而后在此状况下作百分比宽度；固然这个百分比的使用，遵循一个原则：目标元素宽度÷上下文元素宽度=百分比宽度，如咱们总的宽度在980px的状况下再定位一个居中块级宽度为960px的元素，这时候用960/980 获得即为百分比的数值；字体

三、字体单位em对应以为像素px；flex

字体的定值大小不能为绝对像素px，要用相对像素单位em，具体计算方式请参阅这片博客，作一个引路人强大的em;spa

四、自适应图片；.net

自适应图片属性：

img {
   border: 0;
   max-width: 图片原本像素大小
   width: 百分比
}

固然图片的大小要经过所处上下文的状况的；

五、display属性的灵活利用；

在移动前端布局中，display属性能够简化不少复杂的布局，上一篇博客讲到细说CSS中的display属性，另外咱们还提供一种自适应布局，display: flex；具体请参考flex属性；

六、万能的max-width；

max-width的使用其实很简单,灵活使用可使咱们的页面适应不那么僵硬！