快速制作html响应式页面_制作基本的响应页面

快速制作html响应式页面

One of the tenents of responsive design is that you can now create different layouts for your site depending to how wide the browser is, dynamically changing the appearance of your pages as the browser is resized.

响应式设计的宗旨之一是，您现在可以根据浏览器的宽度为网站创建不同的布局，并在调整浏览器大小时动态更改页面的外观。

Let’s say we have a site for the fictional company “Ray’s Flowers”. Most pages in the site feature three div elements (#col1, #col2, and #col3) presented side-by-side for most desktop screens using display: table-cell.

假设我们有一个虚构的公司“ Ray's Flowers”的网站。 该站点中的大多数页面都具有三个div元素( ＃col1 ， ＃col2和＃col3 )，这些元素通过display: table-cell并排display: table-cell在大多数桌面屏幕上。

This design is fluid, so the columns of text become difficult to read when the browser is less than 1000 pixels wide. The changes in appearance between “wider than 1000px” and “less than 1000px” are minimal, so rather than creating a separate style sheet, we could make the new styles part of our main CSS:

这种设计是流畅的，因此当浏览器的宽度小于1000像素时，文本列将变得难以阅读。 “宽于1000像素”和“小于1000像素”之间的外观变化很小，因此，除了创建单独的样式表，我们还可以将新样式作为主要CSS的一部分：

body {
	margin: 0;
	font-family: Cambria, sans-serif;
} 
h1 {
	background: #000;
	margin-top: 0;
}
div#col1, div#col2, div#col3 {
	display: table-cell;
	padding: 1em;
	padding-top: 0;
}
/* standard CSS rules applicable to everything up to this point */
@media screen and (max-width: 1000px) {
	div#col1, div#col2, div#col3 {
		display: table-row;
	}
}

Now if the browser is more than 1000px wide, the columns display vertically; less than 1000px, they are horizontal.

Returning to handheld devices, you can even switch the presentation of the page based on the orientation of the device (technically, this could also work on desktop monitors that can be rotated upright or horizontal, as this rule is also supported in the latest desktop versions of browsers);

返回手持设备，您甚至可以根据设备的方向切换页面的显示方式(从技术上讲，这也可以在可垂直或水平旋转的台式机显示器上使用，因为最新的台式机版本也支持此规则浏览器)；

@media screen and (orientation:portrait) {
	/* appearance rules effective during vertical orientation of the screen */
}
@media screen and (orientation:landscape) {
	/* appearance rules for horizontal orientation of the screen */
}

It should be noted that it is also possible to animate the transition between these @media query states (discussed in an upcoming article), or target page size for printing:

应该注意的是，还可以为这些@media查询状态( @media一篇文章中讨论)或目标打印页面尺寸之间的过渡设置动画：

@media print and (width: 210mm) {
	/*rules for printing on an A4-size page */
}

更多资源和IE (Further Resources & IE)

It should go without saying that IE8 and earlier have no understanding at all of CSS3 media queries; if you wish to target IE, there are JavaScript solutions available.

不用说，IE8和更早的版本对所有CSS3媒体查询都不了解。 如果您希望以IE为目标，则可以使用JavaScript解决方案 。

翻译自: https://thenewcode.com/516/Crafting-A-Basic-Responsive-Page

快速制作html响应式页面