JSP pages frequently encountered problem needs to fit the size of mobile devices
to address:
在JSP加入<meta name="viewport" content="width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0"/>
content attribute values:
width: the width of the visible region, may be a digital value or keyword device-width (width of device)
maximum-Scale = 2.0, Minimum-Scale = 1.0; visible area zoom level
to achieve the adaptation phone page , mainly to set the width to the width of the device using device-width, device-width.
REF:
https://blog.csdn.net/huawuque004/article/details/81368755
Principles of page layout
A allows to automatically adjust the width of the page: "RWD"
The head of the page code, add the line viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport is a web default width and height, above this line means that the width of the page by default equal to the screen width (width = device-width), the original scale (initial-scale = 1) of 1.0, i.e., the page initial size accounted Screen 100% of the area. For the viewport property, I was really in contact with the moving web development is only encountered one of ps layout are fixed 960px, 1000px this.
II. Is not absolute widths
As the page layout will be adjusted according to the screen width, so you can not use the absolute width of the layout, you can not use elements with absolute width.
This one is very important. Specifically, CSS code does not specify the pixel width: width: xxx px; only the specified percentage of the width: width: xx%; or: width: auto; herein refers to the development of a Web page can be used not only in the ps, can be used for both mobile end, but this still needs to be done for webapp webapp use a separate page.
For this knowledge, for the project I'm currently doing useful, mainly used to control the limited width of the image database read out.
III. Relative font size
Fonts can not use absolute size (px), but can only use relative size (em).
body { font: normal 100% Helvetica, Arial, sans-serif; }
The above code is specified, the default font size is the page size of 100%, i.e., 16 pixels.
h1 { font-size: 1.5em; }
Then, the size h1 is 1.5 times the default size, i.e., 24 pixels (24/16 = 1.5).
small { font-size: 0.875em; }
Small element size is 0.875 times the default size, i.e., 14 pixels (14/16 = 0.875).
IV. Flow layout (fluid grid)
"Layout flow" means that the position of each of the blocks are floating, not fixed.
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }
Float advantage is that, if the width is too small to fit two elements, the latter elements are automatically scrolled to the bottom of the front elements, in the horizontal direction will not overflow (overflow), to avoid the occurrence of the horizontal scroll bar. In addition, absolute positioning (position: absolute) use, should be very careful.
V. core "RWD", is the introduction of CSS3 Media Query module.
What it means is that automatic detection width of the screen, and then load the appropriate CSS file.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
Code above means, if the screen width is less than 400 pixels (max-device-width: 400px), loads the file tinyScreen.css.
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
If the width of the screen between the pixel 400 to pixel 600, is loaded smallScreen.css file. In addition to loading CSS file with html tags, you can also load an existing CSS file.
@import url("tinyScreen.css") screen and (max-device-width: 400px);
Six. CSS @media rule of
With a CSS file, you can also according to different screen resolutions, different applications and CSS rules.
@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } }
Code above means, if the screen width is less than 400 pixels, the column block cancel floating (float: none), the width of automatic adjustment (width: auto), sidebar block is not displayed (display: none).
VII. Adaptive Picture (fluid image)
In addition to the layout and text, "RWD" must also implement automatic image scaling. This single line of CSS code:
img {max-width: 100%;} This code is also effective for most embedded video page, it can be written as:
img, object { max-width: 100%;}
Older versions of IE do not support max-width,
So it had to be written as: img {width: 100%;}
In addition, when the windows platform scale the image, image distortion may be visible. In this case, try to use the unique command IE:
img { -ms-interpolation-mode: bicubic; } 或者，Ethan Marcotte的imgSizer.js。 addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
However, conditional, it is best depending on the size of the screen, load a different resolution images. There are many ways to do this one, the server and client can be achieved.