h5移动端屏幕适配
Posted 履霜坚冰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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中，这种情况代码量比较大，屏幕中类也挺多的
以上是关于h5移动端屏幕适配的主要内容，如果未能解决你的问题，请参考以下文章