web像素密度在不同分辨率和移动设备下的解决
normalized.html
<!doctype html>
<html>
<head>
<!-- Encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
<title>normalization test normalized</title>
<style>
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;cursor:default}article,aside,figure,footer,header,hgroup,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:inherit;text-decoration:inherit}
html {
font-size: 16px;
}
/* Using a new pixel ratio of 6/5 */
/* Standard 7" 1024x600 tablet (KINDLE FIRE) */
@media
screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait),
screen and (-o-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (-o-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait),
screen and (device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait) {
html { font-size: 19.2px; } /* 16px x (6/5) */
}
/* 1024x600 tablet with pixel ratio of 3/2 (GALAXY TAB) */
/* Because we have a solid device-pixel-ratio we can avoid the device height */
@media
screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape),
screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait),
screen and (-o-device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape),
screen and (-o-device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait),
screen and (device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape),
screen and (device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait),
screen and (device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape),
screen and (device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait) {
html { font-size: 12.8px; } /* 16px x (2/3) x (6/5) */
}
h1, h2, h3 {
line-height: 2em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1em;
}
</style>
<!-- Scaling and mobile behavior -->
<meta name="viewport" content="width = device-width, height = device-height, maximum-scale=1.0, minimum-scale=1.0" />
</head>
<body>
<h1>H1 at 3em on a base of 16px</h1>
<h2>H2 at 2em on a base of 16px</h2>
<h3>H3 at 1em on a base of 16px</h3>
</body>
</html>
standard.html
<!doctype html>
<html>
<head>
<!-- Encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
<title>normalization test control</title>
<style>
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;cursor:default}article,aside,figure,footer,header,hgroup,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:inherit;text-decoration:inherit}
html {
font-size: 16px;
}
h1, h2, h3 {
line-height: 2em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1em;
}
</style>
<!-- Scaling and mobile behavior -->
<meta name="viewport" content="width = device-width, height = device-height, maximum-scale=1.0, minimum-scale=1.0" />
</head>
<body>
<h1>H1 at 3em on a base of 16px</h1>
<h2>H2 at 2em on a base of 16px</h2>
<h3>H3 at 1em on a base of 16px</h3>
</body>
</html>