1. Preface
Through the previous two chapters grid layout introduced, the depth of knowledge is very shallow, the mind a little uneasy. Can not say sorry to support my garden friends (I am not so noble), is that should learn more about the " fashionable " stuff.
When it comes to web design, I'm afraid I have to mention responsive design. In this chapter I will try the responsive design under the grid layout.
2. Separating the screen interval
Refer to the bootstrap3.x grid system with four different display intervals:
This design of CSS code:
Note: You can zoom the browser window width to experience the background color change---test.
3. Preset layout
Response interval, which we have already analyzed in general. Next, we arrange the page layout for each range.
Our article theme is the introduction of grid layout, so we first pre-set the case, I would like to take the blog home Page Example---it is regrettable that it is not a responsive layout.
It's just the flow layout, which is the fixed width on both sides, the middle adaptive width.
Of course, the blog Park also has a mobile client, and the page layout is concise, mobile browser and support scaling, so browse the page, the Customer experience difference has little impact.
——————————————————————————————————————————————————
Whether it's a small screen or a big screen is a priority, it depends on how you show, arrange, and try to make the user experience the best.
Like what:
Small screen device browsing, menu folding up. Advertising content impact traffic fee not to say, colorful flooded so small screen, I feel the egg pain, objectionable, of course, exclude advertising revenue requirements OH.
Big screen is not to use the flow layout flooding the entire screen, this well, it is best not to limit the width of a range of comparisons.
And so the question thinks, chooses, is a benevolent see thing, I did not ask everybody to listen to me completely.
Well, I prefer to start with a medium screen design, below the projected layout:
This also determines the basic grid, three rows and three columns (space between rows and columns, no mesh required)
Its HTML code:
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "Utf-8" /> <title>Responsive layout</title> <Linkhref= "Styles/site.css"rel= "stylesheet" /> </Head><Body> <DivID= "G"> <DivID= "G1">Head</Div> <DivID= "G2"></Div> <DivID= "G3"></Div> <DivID= "G4">Left</Div> <DivID= "G5">Middle</Div> <DivID= "G6">Right</Div> <DivID= "G7">Bottom</Div> <DivID= "G8"></Div> <DivID= "G9"></Div> </Div></Body></HTML>
Reference preset layout, medium-screen CSS code:
@media (min-width:992px) and (MAX-WIDTH:1199PX){#g {display:-ms-grid;-ms-grid-columns:160px 1fr 320px;/*three columns 1fr refers to the remaining 100%, so that the adaptive width*/-ms-grid-rows:60px 300px 80px; }#g1{-ms-grid-column:1;-ms-grid-row:1;-ms-grid-column-span:3;Background-color:#000000;Color: White; }#g2{-ms-grid-column:2;-ms-grid-row:1; }#g3{-ms-grid-column:3;-ms-grid-row:1; }#g4{-ms-grid-column:1;-ms-grid-row:2;Background-color:#ed7d31; }#g5{-ms-grid-column:2;-ms-grid-row:2;Background-color:#5a9bd5; }#g6{-ms-grid-column:3;-ms-grid-row:2;Background-color:#70ad46; }#g7{-ms-grid-column:1;-ms-grid-row:3;-ms-grid-column-span:3;Background-color:#fec72e; }#g8{-ms-grid-column:2;-ms-grid-row:3; }#g9{-ms-grid-column:2;-ms-grid-row:3; }}
The effect:
Ok! Other interval code, I don't show it.
For example, when a small screen (flat panel) is larger than or equal to 768px layout, the middle and right side are changed to the top and bottom layout.
"Ultra small screen (mobile phone) less than 768px" layout, directly Display:none right block.
For the scaling block and folding menu functions, JS is required to write. That's what I'll say in my later article.
4. Summary
This chapter is a start, I also found that there are no internal elements of the DIV block, should not appear in the HTML code , this let me learn again, then add to correct.
In addition I decided to use less to write CSS, a simple grid layout system, have a common interest, welcome to communicate.
Welcome to join QQ Group: 290576772
Front-end development: Grid layout-responsive
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
