好强悍的标题啊，自适应都可以直接用CSS3属性regions来设置了。不过看了一下兼容性，chrome的大部分兼容，firefox目前不兼容，IE10兼容，webkit内核的也兼容。
权当学习了解一下新知识。更多演示和案例请看原文吧。
CSS regions enable us to disperse content across multiple containing elements. They provide a flow, which consists of content that may appear within multiple elements, and a region chain, which is the collection of elements the flow is spread across. Once these elements have been defined, the flow dynamically fills the elements in the region chain. We can then size our containers vertically without worrying about the content getting cut off, because it simply overflows into next element in the chain. This creates new opportunities for layout with responsive design.
To use regions, start by creating a named flow; simply add the CSS property flow-into to your content element, with the value of your flow’s name. Then, for each region through which you want the content to flow, apply the CSS property flow-from with the same flow name value. The content element will then flow through the region elements. Current implementations in browsers require the property to be prefixed, but we are using the unprefixed version here.
#myContent { flow-into: myNamedFlow; } .myRegion { flow-from: myNamedFlow; } Your HTML would contain a content element and the scaffolding of all of the regions that this content will flow through. When you use regions, the content element will not be visible in its original location and any HTML already in your region elements will disappear, replaced by the content being flowed into them. Because of this, we can have placeholder or fallback content within our region elements.
<div class="myRegion"></div> <div class="myRegion"></div> <div class="myRegion"></div> <div id="myContent">...</div> When using regions, the content being flowed is not a child of the region elements. You are only changing where the content is displayed. According to the DOM, everything remains the same, so the content does not inherit styles from the region in which it lives. Instead, the specification defines a CSS pseudo-selector, ::region(), which allows you to style the content within a region. Apply the pseudo-element to the region’s selector and then pass a selector as an argument, specifying the elements that will be styled within a particular region.
.myRegion::region(p){ /*styles for all the paragraphs flowing inside our regions*/ } 