responsive design font size

Recently in the study of the content of responsive design, to do some finishing, some of the pictures from the network.1. Why responsive web design is requiredDue to the large number of mobile devices currently used, as well as the size of the PC display gradually large diff

responsivator, but the interface is simpler Responsivepx You can drag to modify the window size to simulate different device screens. Screenqueri. es This tool was introduced in articles earlier than gbin1. if you want to learn more, read and share a web tool named Screenqueri that helps you test the responsive design online. es, the most interesting thing is th

decisions. Usually you will start at the same time in two ways, so you have to see which way is best for you. Web Fonts vs System fontsWant to have a cool Futura or Didot effect on your website? That's using Web fonts. Although Web fonts look cool, you have to remember that these fonts require users to download, the more words, the longer the user loads the page. On the other hand, the system font loading speed is much faster (if the user has t

might be amazed at the number of browsers supported, such as Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, ie9+ and opera11+. But the poor ie6-8 cannot, and you will make them transparent, I have always been so.However, the use of units to set the font, can not completely consider IE, if you want to use this REM, but also want to be compatible with the effect of IE, you can consider "px" and "REM" with the use of "px" to achieve ie6-8 effect,

element, but a child element, so In the EM and% will be twice times before. When you add an EM unit to an element, you should take into account the font size of all the parent elements. As you can see, it's easy to make people confused. Using REM can be a good solution to this problem. REM only needs to calculate the font

It is said that 2013 will be the year of responsive web design. Ethan Marcotte, a user experience designer, proposed the term "responsive web design (RWD)" in 2010, namely, responsive web design. This concept has extended from the

principles:Create a flow layout (Fluid layouts). The width of all containers must be defined as a percentage of the browser viewport.Use CSS3 Media Query. Different styles are used for different media types such as screen, printer, TV, etc., as well as different media parameters such as width, height, color, resolution, and so on.Use the adaptive picture (Fluid image). The image size can be adapted to the maximum display width.To determine which medi

screen and (max-width:560px) { #content { width:auto; Float:none; } #sidebar { width:100%; Float:none;} } 　　 Elastic PictureUsing max-width:100% and Height:auto, you can make your pictures more resilient.img { max-width:100%; Height:auto; width:auto\9; /* IE8 */} 　　 Elastic Inline VideoUsing width:100% and Height:auto, you can make inline video more resilient.. Video Embed,.video object,.video iframe { width:100%; Height:auto;} 　　 webkit

the default size of the page, which is 16 pixels. H1 { Font-size:1.5em; } Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5). Small { Font-

following terms of style.In your media query, use the EM element instead of the pixel to ensure that the media query considers the font size in addition to the screen width. Calculated at the EMS screen width, the pixel's target width is 16, which is the body's default font size. HTML5 section: CSS3 sec

[Android] The font uses the dp unit to avoid the effect of setting the system font size on the layout. Take mx3 as an example. You can select the font size from Settings> display> font