Responsive layout, bootstrap (instance), and bootstrap

Responsive layout, bootstrap (instance), and bootstrap
Note: In the past few days, the company has asked the website to implement a responsive layout, so it has a relatively comprehensive understanding of the responsive layout and has made several instances.

Introduction to responsive LayoutReference: Wikipedia, CSS3 @ media query, Bootstrap Chinese official website, despise IE, comparison of 5 Most Popular Front-end frameworks in 2014, adaptive Webpage Design-Ruan Yifeng, responsive webpage design, responsive Layout-Baidu Baike, responsive website design principles, responsive layout, new responsive Web design principles, what is responsive layout design ?, Differences between adaptive and responsive What does responsive layout mean?The responsive layout can display different webpage la s Based on Different browsing devices (such as PCs, tablets, and smartphones), reducing scaling, translation, and scrolling. Adapt to the general trend of mobile terminals, improve user experience, and reduce development costs. Why is responsive layout used?The main reason is that the webpage is applicable to mobile devices, and the screen resolution is the biggest compatibility problem. You can provide different websites for different devices, that is, the same website can be used as two types of pages: normal PC and mobile. Both the early development and the later maintenance and revision are very troublesome. What are the disadvantages of responsive layout?Code compatibility and heavy workload Design principles? What types of projects are suitable?Backward compatible, move first. For complex webpage la s, it is not suitable for adaptive webpage la S. One of the reasons is that the implementation cost is too high, and the other is complicated pages (such as the homepage of rongshang network and the homepage of Chinese enterprise clusters) it is not suitable for mobile browsing. Other responsive layout frameworks? The Prue framework is a lightweight Yahoo framework that is compatible with IE7 or later and has good performance, but has few Chinese documents, which is not conducive to team development and has no components. Foundation by ZURB, sort Bootstrap, heavyweight, 362K size Bootstrap advantages ? Low learning cost Is currently the most popular adaptive framework. The performance is very good. The basic file size is only 149.1 kb. Bootstrap. min. js 35.1 k bootstrap.min.css 114 k Complete Chinese documents and a full set of video tutorials There are many components to choose from, such Bootstrap switch, Sco. js, and Flat UI for quick development Compatibility

 
 

  
  
 
   
 
    
 
 
    
Chrome
 
    
Firefox
 
    
Internet Explorer
 
    
Opera
 
    
Safari
 
   
 
  
  
  
 
   
 
    
Android
 
    
Supported
 
    
Supported
 
    
N/
 
    
Not Supported
 
    
N/
 
   
 
   
 
    
IOS
 
    
Supported
 
    
N/
 
    
Not Supported
 
    
Supported
 
   
 
   
 
    
Mac OS X
 
    
Supported
 
    
Supported
 
    
Supported
 
    
Supported
 
   
 
   
 
    
Windows
 
    
Supported
 
    
Supported
 
    
Supported
 
    
Supported
 
    
Not Supported
 
   
 
  
 
 

For windows, IE8 is supported. If the framework is not used, IE9 or above is required, and IE6 is compatible with the plug-in Bsie (despise IE.

Response layout instance

Response page instance address

Http://xys.laiwanapp.com/bootstrap-1/ http://xys.laiwanapp.com/bootstrap-2/ http://xys.laiwanapp.com/bootstrap-3/ Compatibility issues (resolution decomposition -*~ 768 mobile phone, 768 ~ 992 tablets, 992 ~ 1200 ordinary PC, 1200 ~ * Large screen PC)

	Chrome18	Firefox11 (firefox3.6)	IE7 (fewer users)	IE8 (mainstream)	IE9 (the latest version)	IE6
Instance 1-Weibo	None	None (no rounded corner)	None	None	None	Crash
Instance 2-album	Incorrect rounded corner	No rounded corner (no rounded corner, not supported by the background size attribute)	None	None	None	Crash
Instance 3-blog	Incorrect rounded corner	No rounded corner, no animation on the progress bar (no rounded corner, no animation on the progress bar)	None	None	None	Crash
Others

Description

Chrome18 and firefox are both old versions, with very few usersThe position and z-index attributes cannot be used for background attributes.For IE6 crash, you can use the Bootstrap plug-in Bsie to solve most of the problems. However, if you do not want to support IE6, we do not recommend using this plug-in, affecting performance.There are no rounded corners, Normal rounded corners, incorrect rounded corners, and the rounded corners are CSS3 attributes, so there will be compatibility issues, but IE7 and above are all supported, which is already very good (w3school said IE9 and above are supported, css hack is used)

Summary: compatibility issues with mainstream browsers are not significant in older browsers.Other mobile testing needs to be improved Compatibility issues (resolution decomposition-

1 .*~ 768 mobile phone, column 12. 768 ~ 992 Tablet, Column 23. 992 ~ 1200 normal PC, Column 24. 1200 ~ * Large screen PC, Column 3

) 

Resolution dpi	Ppi	Model	Vertical	Horizontal
2560x1536	546	MX4 pro	1	1
720x1280		Huawei honor 3c	1	1
1200x1920		Huawei x1 7.0	1	2

  Since there is no tablet computer, there is no way to test it. It will be completed after the test. In addition, I do not know why the 2560x1536 resolution cannot display three columns but only one column. I do not know what dpi and ppi mean. Please reply to me if you want to know. Thank you! Pai_^