Self-adaptation is also called a response style, which refers to a web design that automatically recognizes screen width and adjusts accordingly. More and more sites are being used. At the same time, it has been announced that everyone is encouraged to use HTML5 technology to create sites where users can experience well at pc and mobile stations. What adjustments to the code would be needed to adapt to the site? Let's take a look at the sharing of chiang fei, head of seo, pipiru network。
I. What website is fit for self-adaptationA web design that automatically recognizes the size of the terminal device screen and adjusts accordingly. This web-page design successfully addresses how to have the same web effects on network devices of different sizes. It is recognized that there are at least four benefits of self-adaptation: enhanced user experience; consistency between pc and mobile seos; avoidance of duplication of content and error; and harmonization of links。
The more obvious shortcoming of self-adaptation is that it takes longer to develop a more costly web site, especially for complex adaptation sites with additional programming. There are many open-source templates available if the website needs to be simpler。
For the more mature pc site, full-stop adaptation may require the replacement of all the original codes, with greater time and technical costs, and with multiple portals (entry points) of a site, which would greatly increase the complexity of architecture design, so many of the sites now have only a mobile layout。
Ios and android browsers are based on the webkit core, and both browsers and many other browsers support the viewing mEta elements overwhelm the default layout settings by inserting a label in an HTML label that sets a specific width (e. G. Pixel value) or scale 2. 0 (twice the actual size of the device), followed by an extension of a page to double the actual size of the device mExample of eta tag:
2. To change the page to a percentage layout, when a browse window is outside the defined media query, the page will need to scroll horizontally in order to be fully browsed, and the page elements will be able to change styles flexibly between one media query and another, depending on the size of the window, specifically that the css code does not specify specific pixel width: width:xx px; rather, a percentage width is specified: wdth:xx per cent; or directly: wdth:auto; here you can convert a fixed pixel width to the corresponding percentage width by a simple formula: width of the target element ÷ width of the context element = percentage width
For example:
# wrapper #
Margin-right: auto;
I'm sorry;
Width: 960px;
#header #
Margin-right: 10px;
Margin-left: 10px;
Width: 940px;
Css converted to a percentage of header block is:
#header #
Margin-right: 10px;
Margin-loft: 10px;
Width: 97. 916667%
3. Replace px with em. Similarly, target element width ÷ context element width = percentage width, the formula also applies to converting pixel units of text to relative units. It is noteworthy that the default text of the modern browser is 16 pixels, so the effect of applying any of the following rules to body tags at first is the same:
Font-size: 100 per cent;
Font-size: 16px;
Fort-size: 1em;
For example, the style of a website's title:
#logo
Display: block;
Dading-top: 75px;
Color: #0d0c0c;
Fort-family:;
Font-size: 48px;
The modified style is as follows:
#logo
Display: block;
Dading-top: 75px;
Color: #0d0c0c;
Fort-family: ariel;
Font-size: 3em
The use of fluid grid means that the position of each block is floating and not fixed。
. Main {faat: right; wdth: 70%;}
. Leftbar {faat: left; wdth: 25%;}
The advantage of doing so is that if the width is too small to leave two elements behind, the latter elements will automatically scroll below the front elements, without spilling in horizontal direction, avoiding the appearance of horizontal scroll bars and greatly improving the user's reading experience. In addition, the use of absolute positioning is very careful。
5 the use of media query technology in self-adaptation design techniques, csss3 supports the media type defined in cssss2. 1, while adding a number of functional attributes related to media types, including max-width (maximum width), device-width (equipment width, orientation (screen orientation: screen or vertical screen), so that the corresponding css files can be loaded through media query. For example, the code below defines how a page is loaded if it is displayed on screen and the screen width does not exceed 480px. Cs
It is also possible to create several stylesheets to fit the width range of different devices or different resolutions, although it is more effective to combine more than one media query in a stylesheet file:
@mediao(mix-device-width: 480px)
@media screen and (min-width: 600px){
. Hereismyclass
Width: 30 per cent;
Float: right;
The style class defined in the code above is only valid if the browser screen is more than 600 px wide。
Thus, the use of min-width and max-width makes it possible to judge both the size of the screen and the actual width of the browser, and the size of the device itself can be determined by using the max-device-width and max-device-width properties if it is expected that the browser that runs on it will act on a particular device through media query, while ignoring whether it does not have the maximum size that is not consistent with the size of the device。
Media query is not the only solution. It's also through javasIt could be an alternative for cript to achieve self-adaptation design, especially when some old browsers are unable to support the css3 media query perfectly. Of course, we can still count on professional javasCript library to help old browsers (ie5+, firefox 1+, safari 2, etc.) support css3 media queries. Usage method: download css3-mediaqueries. Js and then call it on page, e. G.:
6. Designing responsive pictures, there are a number of techniques for scaling up images, many of which are simple, and the more popular method is to use css max-width properties:
Img {max-width: 100%;}
The old version of ie does not support max-width, so it says:
Img {width: 100%;} in addition, images may be distorted when the windows platform scales pictures. At this point, you can try to use ie-specific orders:
Img {-ms-interpolation-mode: bicubic;}
Or ethan marcotte's imgsizer. Js。
Ddloadevent()
=
(a) document. Getelementbyid (“content”). Getelementsbytagname (“img”);
Imgsizer. Collate (imgs);
I'm not sure;
If so, it is advisable to load different resolution images according to the size of the screen。
Iii. How to write the 100-kilometer key, application-device label for adaptation sites, with an adaptation-designed web page and a 100-kilogram design, that is, to tell 100-do "i'm a self-adaptation page" to facilitate identification and validation. The method is simple, but just add an applicable-device label to the view label above:
This indicates that the page is suitable for browsing both on mobile devices and on pcs。
2 when submitting using sitemp of the 100-degree platform link submission tool, make a mobile type tag, specifying the value:
Other web pages have the following values:
Other organiser
Other organiser
: code fit
No of the above labels are on pc web page
