Shulou(Shulou.com)06/01 Report--

With the continuous development of mobile devices, mobile devices have caught up with and surpassed traditional pc. What follows is the change of the traditional pc website. Html5 + css3. Promoted this change!

So I painted for a few days and changed the traditional web page that went to the turntable into a responsive website.

Click to see the effect: go to the turntable network [www.quzhuanpan.com] (note the difference between PC and mobile! )

good! Here are some of my summaries! I hope I can help you!

Isn't it an artifact? In fact, the artifact is just a facade. Next, let's start our theme.

1. Allow the width of the page to be adjusted automatically

How on earth does "adaptive web design" do? It's not that hard. First, add a line of viewport meta tags to the header of the page code

Viewport is the default width and height of the page, which means that the width of the page is equal to the screen width (width=device-width) by default, and the original zoom ratio (initial-scale=1) is 1.0, that is, the initial size of the page accounts for 100% of the screen area. All major browsers support this setting, including IE9. For older browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js. 2. Use absolute width as little as possible because the page will adjust the layout according to the screen width, so you cannot use a layout with absolute width, nor can you use elements with absolute width. This one is very important. Specifically, the CSS code cannot specify the pixel width: width:xxx px; can be replaced by specifying a percentage width: it can also be used with css's cal to calculate the width width: xx%; or width:auto 3, relative size fonts can not use absolute size (px), but can only use relative size (em) or high definition solution (rem), rem is not limited to font size, the front width width can also be used instead of percentage. The code above body {font: normal 100% Helvetica, Arial, sans-serif;} specifies that the font size is 100% of the default size of the page, or 16 pixels. H2 {font-size: 1.5mm;} then the size of H2 is 1.5 times the default size, that is, 24 pixels (24max 16mm 1.5). The size of the small {font-size: 0.875em;} small element is 0.875 times the default size, that is, 14 pixels. Font is not necessary, this key depends on the demand! Take care of it yourself! Hey, hey. 4. Flow layout (fluid grid) "flow layout" means that the position of each block is floating and not fixed. For more information, please see the article on Mobile layout. The advantage of .main {float: right; width: 70%;} .leftbar {float: left; width: 25%;} float is that if the width is too small to fit two elements, the latter element will automatically scroll below the previous element and will not overflow (overflow) in the horizontal direction, avoiding the occurrence of horizontal scroll bars. In addition, absolute positioning (position: absolute) should also be used very carefully. 5. The core of choosing to load CSS "adaptive web design" is the Media Query module introduced by CSS3. It means that the screen width is automatically detected and then the corresponding CSS file is loaded. The above code means that if the screen width is less than 400 pixels (max-device-width: 400px), the tinyScreen.css file is loaded. If the screen width is between 400 and 600 pixels, the smallScreen.css file is loaded. In addition to loading CSS files with html tags, you can also load them in existing CSS files. @ import url ("tinyScreen.css") screen and (max-device-width: 400px); 6. CSS @ media rules in the same CSS file, you can also choose to apply different CSS rules according to different screen resolutions. @ media screen and (max-device-width: 400px) {.column {float: none; width:auto;} # sidebar {display:none The above code means that if the screen width is less than 400 pixels, the column block is unfloating (float:none), the width is automatically adjusted (width:auto), and the sidebar block is not displayed (display:none). 7. Fluid p_w_picpath of pictures in addition to layout and text, "adaptive web design" must also achieve automatic zoom of pictures. It only takes one line of CSS code: img {max-width: 100%;} this code is also valid for most videos embedded in the web page, so it can be written as: img, object {max-width: 100%;} the old version of IE does not support max-width, so it has to be written as: img {width: 100%;} in addition, image distortion may occur when the windows platform zooms the image. At this point, you can try using IE's proprietary command: img {- ms-interpolation-mode: bicubic;} or Ethan Marcotte's imgSizer.js. AddLoadEvent (function () {var imgs = document.getElementById ("content"). GetElementsByTagName ("img"); imgSizer.collate (imgs);}); however, if possible, it is best to load images of different resolutions depending on the size of the screen. There are many ways to do this, both server-side and client-side. The above is basically the responsive attention that I have summed up. When designing a website, you have to think about how to display it on the mobile side. Fully considered in writing, otherwise the later unified mobile devices, it will be very troublesome, and the code is not easy to maintain! The former should know.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.