Paip. Adaptive Web design and responsive design methodology and tools supplement (2) o54
#-----Responsive Design Framework
Bootstrap is very popular.
Foundation
Claims to be the most advanced responsive front-end framework in the world.
#---Never use a relatively high ... Use only relative width: Particularly large layout on ...
#----------Fonts for adaptive VW
Using EM does not seem to take effect ...
Use VW walk ok .... font-size:4vw; Suitable for 320*480-----600*900 etc...
By the way, to have a vmin, the smallest font. Belle. Too little Li can't see.
Manual Size window, you can fit the ...
Author of Old Wow's Paw attilax Ayron, email:[email protected]
Reprint please indicate source: Http://blog.csdn.net/attilax
#---------Tools for responsive design ff29
There is a responsive design tool inside the Web tool that adjusts the size of the Web interface. The usual 320*480-----600*900, etc... Easy to ...
Belle is going to set a border outside ....
#----How media query is used
I. Judging media types, referencing different style sheets
<link rel= "stylesheet" media= "screen and (judging condition)" herf= "The style sheet file that needs to be called"/>
The corresponding CSS file is called by setting the judging condition of the screen. This example is used for the whole page of different styles of CSS call and selection, using this method may need to create multiple copies of CSS files for a page.
Second, to determine the media type, the implementation of different CSS style properties
@media screen and (max-width:240px) {
. box{width:200px;}
. title{color:red;}
}
@media screen and (min-width:355px) and (max-width:400px)
{}
The above example can appear in an external style sheet and an internal style sheet. The @media screen property is labeled directly in the style sheet to determine the event of the media type.
@media screen and (min-width:1200px)
#-------------Responsive Picture:
Responsive picture Technology idea: not only to scale the picture, but also to reduce the resolution of the image on the small device. The implementation of this technology requires the use of several related files that we can get on GitHub. Includes a JavaScript file (Rwd-images.js), a. htaccess file, and some sample resource files. The general principle is that Rwd-images.js detects the screen resolution of the current device, and if it is a large-screen device, adds a base tag to the head section of the page and directs subsequent picture, script, and stylesheet load requests to a virtual path "/rwd-router". When these requests arrive on the server side, the. htacces file determines whether the request requires a raw picture or a small "responsive picture" with the appropriate feedback output. For small screen mobile devices, large images of the original size will never be used.
