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

Most people do not understand the knowledge points of this article "how to convert the ratio of blueprints to html pages", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "blueprints and html page ratio how to convert" article.

1. Allow or prohibit page resizing

Both iOS and Android browsers are based on the webkit core. These two browsers and many other browsers support the viewport meta element to override the default canvas zoom setting. You only need to insert a tag in the HTML tag, in which you can set a specific width (such as pixel value) or a zoom ratio of 2.0 (twice the actual size of the device). Here is an example of a meta tag that zooms in a page to twice the actual size of the device:

If page resizing is not allowed, change user-scalable=yes to user-scalable=no, such as:

2. Modify the web page to a percentage layout

Adaptive web pages can never use fixed size to specify the layout range, but the percentage layout.

When a browsing window is outside the fixed scope of the media query, the page needs to be scrolled horizontally to complete browsing, while the percentage layout allows page elements to flexibly modify the style between one media query after another according to the window size, specifically, the css code will not specify a specific pixel width: width:xxx px, but will specify a percentage width: width:xx%, or directly width:auto.

Here you can convert the fixed pixel width into the corresponding percentage width according to a simple formula: target element width / context element width = percentage width.

For example:

# wrapper {

Margin-right: auto

Margin-left: auto

Width: 960px

}

# header {

Margin-right: 10px

Margin-left:10px

Width: 940px

}

The css of header chunks converted to percentage is:

# header {

Margin-right: 10px

Margin-left: 10px

Width: 97.916667%

}

3. Replace px with em

Similarly, the formula of target element width / context element width = percentage width also applies to converting the pixel units of text to relative units. It is worth noting that the default text in modern browsers is 16 pixels, so applying any of the following rules to the body tag initially has the same effect:

Font-size: 100%

Font-size:16px

Font-size: 1em

For example, the corresponding style of the title of a website:

# logo {

Display: block

Padding-top: 75px

Color: # 0d0c0c

Font-family: Arial

Font-size: 48px

}

The modified style is as follows:

# logo {

Display: block

Padding-top: 75px

Color: # 0d0c0c

Font-family:Arial

Font-size:3em

}

4. The use of mobile layout (fluid grid)

"flow layout" means that the position of each block is floating and not fixed.

.main {float: right;width: 70%;} .leftBar {float: left;width: 25%;}

The advantage of this is that if the width is too small to hold two elements, the latter element will automatically scroll below the previous element and will not overflow in the horizontal direction, avoiding the emergence of horizontal scroll bars and greatly improving the user's reading experience. In addition, absolute positioning (position:absolute) should also be used very carefully.

5. The use of Media Query technology

In the adaptive design technology, css3 supports the media type defined by css2.1 and adds a lot of functional attributes related to the media type, including max-width (maximum width), device-width (device width, orientation (screen orientation: horizontal or vertical screen), so you can load the corresponding CSS file through Media Query. For example, the following code defines that if the page is rendered through the screen and the screen width does not exceed 480px, the shetland.css is loaded

You can also create multiple stylesheets to accommodate the width range of different devices or resolutions, although it is more efficient to consolidate multiple Media Query into one stylesheet file:

@ media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {

}

@ media screen and (min-width: 600px) {

.hereIsMyClass {

Width: 30%

Float: right

}

}

The style class defined in the above code is valid only if the browser screen width exceeds the 600px.

Therefore, you can use min-width and max-width to determine both the screen size and the actual browser width, and if you want to act on a particular device through Media Query, but ignore whether the browser running on it is inconsistent with the device screen size because the size is not maximized, you can use the max-device-width and max-device-width properties to determine the screen size of the device itself.

Media Query is not the only solution, and adaptive design can also be achieved through Javascript, especially when some old browsers cannot perfectly support CSS3's Media Query. Of course, we can still make use of professional Javascript libraries to help old browsers (IE5+,Firefox 1, magic, and Safari 2, etc.) support CSS3's Media Queries. How to use it: download css3-mediaqueries.js and call it on the page, for example:

6. Design responsive pictures

There are many techniques for zooming pictures over the same period, many of which are simple and easy, and the more popular method is to use the max-width property of CSS:

Img {max-width: 100%;}

The older version of IE does not support max-width, so it has to be written as:

Img {width: 100%;}

In addition, when the windows platform zooms the picture, the image may be distorted. At this point, you can try using IE's proprietary commands:

Img {- ms-interpolation-mode: bicubic;}

Or, Ethan Marcotte's imgSizer.js.

AddLoadEvent (function () {

Var imgs =

Ocument.getElementById ("content") .getElementsByTagName ("img")

ImgSizer.collate (imgs)

})

If there are conditions, it is best to load pictures of different resolutions according to the size of the screen.

The above is about the content of this article on "how to convert the ratio of design drawings to html pages". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

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.