Share a recent in-use responsive CSS Framework Pure

Responsive, which is based on the browser or different device screen size adaptive content.

The first time to look at the response, the understanding is to write in the head to determine the width of the browser and other things, but also to set the low version of IE compatible.

Such as:

<meta name= "viewport" content= "Width=device-width, User-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0; "/>
<link rel="stylesheet"Type="Text/css"Media="Screen and (min-width:1000px)"href="Css/special1000.css"/><link rel="stylesheet"Type="Text/css"Media="Screen and (min-width:1900px)"href="Css/special1900.css"/>

The mete tag means that the page does not scale. Then the CSS outside the chain style refers to the minimum width of less than how much to call what CSS, there is a problem is to write a lot of compatibility of CSS. But it also has the advantage that some inconvenient adaptive content is manually adjusted via CSS.

Pure is a framework that I have tested and found to be compatible with the low version of IE, and other response-style foreign layouts will appear in the IE8 overlay and other problems.

Pure website: http://purecss.io/

First contact with pure, more than a clue. But after a lot of tossing, finally summed up a set of simple use method.

The first step:

Set meta

<meta name="viewport" content="width=device-width, User-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0; " />

Step Two:

Referencing the underlying CSS, that is, all the references to pure code before the introduction of a CSS

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">

Step Three:

Reference Pure's main CSS

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/ Pure-min.css">

Fourth Step:

Introduce the pure CSS you need, here, let's take a pop, just respond to the layout:

<!--[if8]>    <link rel="stylesheet" href= " Http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css"><! [endif]--><!--[if8]><!-->    <link rel="stylesheet  " href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css "><!--<! [endif]-->

All right. All references to this reference are made. How do you write it?

Let's see what the authorities say:

class="pure-g">    class="pure-u-1-3" ><p>Thirds</p></div>    class="pure-u-1-3" ><p>Thirds</p></div>    class="pure-u-1-3" ><p>Thirds</p></div></div>

We create a new Web page, add the references, and add these div to the body.

All pure labels should have a width of 100% and control the layout in a few minutes. (For specific can do a few, please click http://purecss.io/grids/)

The pure grid system supports 5-and 24 -grid systems, with two main styles: Pure-g and pure-u-*

1, pure-g, grid style, such as <div class= "Pure-g" ></div> this implements a grid

2, pure-u-*, cell style, the contents of the grid must be placed in the grid unit. For example, pure-u-1-2 indicates that the cell occupies 1/2 of the width, pure-u-2-3 represents the width of the cell 2/3

Pure-g is that this is a table, the equivalent of a table, the cell in the table? That's pure-u here. -1-3 refers to 3 columns, each of which accounts for 3 of 1.

Note: Do not write other control code in the div container where the pure tag resides.

Well, we found that this auto-expanding 3 column wants a bit of spacing, so just add a new div control inside the tag.

<divclass="pure-g"> <divclass="pure-u-1-3"> <div style="width:90%;margin-left:90px;">content</div> </div> <divclass="pure-u-1-3"><p>Thirds</p></div> <divclass="pure-u-1-3"><p>Thirds</p></div></div>

Some people say, no effect ah, the focus has come.

Add Pure-u-1 pure-u-md-1-2 Pure-u-lg-1-3 in class

Pure-u-1 represents 1 cells when the width is minimized

Pure-u-md-1-2 represents 2 when the width reaches a certain size

Pure-u-lg-1-3 represents 3 when the width reaches a certain size

At present I understand so, we can test under.