Summary of html5/css3 responsive page development

Adaptive is a set of templates that adapt to all terminals, but the layout seen on each device is the same, commonly known as width adaptive.

A set of responsive templates adapts to all terminals, but the layout seen by each device may be different.

Although responsive/adaptive web design will bring the disadvantages of being compatible with various devices, heavy workload, cumbersome code, and long loading time, they are cross-platform and terminal, can be designed once, are universally applicable, and can be adapted according to screen resolution and Automatically zooming pictures and automatically adjusting layout are not only technical implementations, but also a new way of thinking about design.

The solution for many websites is to provide different web pages for different devices, such as providing a dedicated mobile version, or iPhone/iPad version. Although this ensures the effect, it is more troublesome and requires maintaining several versions at the same time. Moreover, if a website has multiple portals, it will greatly increase the complexity of the architectural design.

Adaptation still exposes a problem. If the screen is too small, even if the web page can be adapted to the screen size, it will feel that the content is too crowded when viewed on a small screen. Responsiveness is a concept derived to solve this problem. It can automatically recognize the screen width and adjust the web design accordingly. The layout and displayed content may change.

Adaptive experience http://m.ctrip.com/html5/ Responsive experience http://segmentfault.com/

CSS Secret Garden http://www.csszengarden.com/

http://caibaojian.com/demo/ued/

 <meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>

Explanation of several parameters of this code:

§width = device-width: width equal to the width of the current device

§initial-scale: initial scaling (default setting is 1.0)

§minimum-scale: The minimum scale the user is allowed to zoom to (default is 1.0)

§maximum-scale: The maximum scale the user is allowed to zoom to (default set to 1.0)

§user-scalable: whether the user can manually zoom (default is no, because we don't want users to zoom in and out of the page)

2. Media query CSS3 media query is a key factor in realizing responsive design. You can use the media query feature to have the page use different CSS blocks based on the width of the device.

The following css rules will take effect when the screen width is less than or equal to 980:

 @media (orientation:portrait) and (max-width:460px) { .video .innerBox .news a.more { display: none; } .video .innerBox .news span { display: none; } .video .innerBox .news { width: 100%; } .video .innerBox .news ul { width: 100%; text-align: center; }}

orientation: portrait | landscape

portrait:

Specifies that the height of the visible area of ​​the page in the specified output device is greater than or equal to the width

landscape:

Except for the portrait value, they are all landscape

Select Load CSS to load the smallScreen.css file if the screen width is between 400 pixels and 600 pixels.

 <link rel=stylesheet type=text/cssmedia=screen and (min-width: 400px) and (max-device-width: 600px) href=smallScreen.css />

3. Percent layout

1. Design process of html5/css3 responsive page

Step 1: Determine the type of device and screen size that need to be compatible: including mobile devices (mobile phones, tablets) and PCs. For mobile devices, pay attention to adding gesture functions when designing and implementing them.

Screen size: including various mobile phone screen sizes (including horizontal and vertical), various tablet sizes (including horizontal and vertical), ordinary computer screens and widescreens.

Step 2: Make different wireframe prototypes for the determined sizes. You need to consider how the layout of the page changes under different sizes, how to scale the content size, the deletion of functions and content, and even how to operate in special environments. Specialized design, etc. This process requires close communication between designers and front-end developers.

Step 3: Visual design. Import the images to the corresponding device for some simple tests, which can help us find problems in accessibility, readability, etc. as early as possible.

Compared with traditional web development, responsive design pages have changes in page layout and content size, so the final output is more likely to differ greatly from the design draft, requiring more communication between front-end developers and designers.

2. Responsive fonts

Comparison between several different units in CSS

px: Pixel. Relative length unit, the size is determined by the screen resolution. (Cooperating with media enquiries)

em: relative length unit. Equivalent to the font size of the text within the current object, or relative to the browser's default font size if the current font size for inline text is not set. The value of em is not fixed, it inherits the font size of the parent element. All unmodified browsers conform to: 1em=16px. Then 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

rem: a new relative unit in CSS3. The main difference from em is that when using rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer. Currently, all browsers except IE8 and earlier support rem. For browsers that do not support it, the solution is very simple, which is to write an additional absolute unit statement. These browsers ignore font sizes set with rem.

%: In addition, we can also use percentage to specify the size, which represents the multiple of the current font relative to the browser's default font size. This unit is also frequently used in page responsive design.

 html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */}p{font-size :14px;font-size:1.4rem;}

It should be noted that in order to be compatible with browsers that do not support rem, we need to write the corresponding px value in front of rem, so that browsers that do not support it can be downgraded gracefully. In fact, you don’t have to worry too much about whether to use the default font-size: 100% or set it to font-size: 62.5%. If you introduce a CSS preprocessing tool, you can naturally use the default value. If you use font-size: 62.5% for other reasons There is nothing wrong with it, you can reset it back to the default font-size you need in the body.

3. Responsive image and video processing

http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#

1. Background image----media query

2. Picture liquefaction----elastic picture

 img, object { max-width: 100%;}https://www.filamentgroup.com/examples/responsive-images/

3.HTML5 <picture> element

HTML5's <picture> element can set multiple pictures.

Browser support

 <picture> <source srcset=images/img_smallflower.jpg media=(max-width: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, Microsoft YaHei;"> 
 <script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>
 4. Use noscript tags to create responsive images
 Js dynamic loading of large and small pictures 
 <span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=your alt text class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var responsiveImageTag = { replaceInitialImages:function(respons) { var platform = desktop; var resImage = '.'+respons; var responsiveImages = $(resImage); var i, noOfresponsiveImages = responsiveImages.length; //Current display device width test if(screen.width <= 767){ //767px, smaller than ipad They all think it is mobile platform = mobile; } //set initial source element on image for(i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[i]); var img = window.document.createElement(img); img.alt = noScriptElem.attr(data-alttext); if(platform == = mobile){ img.src = noScriptElem.attr(data-mobilesrc); }else{ img.src = noScriptElem.attr(data-fullsrc); } img.className = responsive; $('.img-placeholder').eq(i).html('').append(img); noScriptElem.hide( ); } }};responsiveImageTag.replaceInitialImages('responsivize');$(window).resize(function(){ responsiveImageTag.replaceInitialImages('responsivize');});</script>
 4. Responsive framework
 Customization: If your website has a large number of diverse designs, then if you still want to use bootstrap, you need to modify the framework as the bottom layer: a large number of styles need to be copied, and the CSS hierarchy is confusing and difficult to maintain.
 In some situations, bootstrap is very useful. For example, if you want to quickly build a relatively beautiful personal website, enterprise website, blog backend management interface and other projects that do not require high page customization, they are often more suitable for backend projects. Most backend system browsers are compatible with good concession styles and are not easy to dig into details. . Or you may be inexperienced in building a website front-end, considering browser compatibility and countless device sizes. Bootstrap will solve a lot of the trouble for you.