h5移动端屏幕适配
1.rem
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>Document</title> <style> html{ font-size: 20px; //设置1rem代表的大小,一般选用20比较好计算 } body{ margin:0; overflow: hidden; } </style> </head> <body> <script> (function (doc, win){ var html = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //手机横屏,竖屏可在此处设置 recalc = function(){ var clientWidth = html.clientWidth; if (!clientWidth) return; docE1.style.fontSize = 20*(clientWidth/320) + 'px'; //以iphone4屏幕为基准 }; if (!doc.addEventListener) return; win.addEventListener('DOMContentLoaded', recalc, false); //$(window).on('resize',function(){}) })(document, window); </script> </body> </html>
上述代码,便是屏幕适配的整个框架,可以适用手机,平板,电脑。
可以在其中写入自己的代码,以rem为单位(此代码1rem=20px);
有缩放效果,以px为单位,是绝对值,不会随着屏幕大小的改变,而改变;
以百分比为单位,注意将标签的所有父元素都已百分比为单位,同样有缩放效果;
2.从css角度考虑
<meta charset="UTF-8"> <title>Document</title> <style> html,body{ margin:0; padding:0; } .wp{
width:800px;
} @media screen and (min-width: 1000px){ } @media screen and (min-width: 640px) and (max-width:999px){ .wp{ width:800px; } } @media screen and (max-width:639px){ .wp{
width:800px;
} } </style> </head> <body> <div class="wp"> </div> </body> </html>
上述代码中一个@media代表一种屏幕大小,相当于js中的一个if语句,然后将在不同屏幕下显示的样式分别写进自己的@media中,这种情况代码量比较大,屏幕中类也挺多的