HTML5 手机端动态适配

• CSS控制

　　　　em、rem布局

　　　　这里给出一个自己常用的实例，CSS控制移动端不同机型的适配主要是利用媒体查询来根据屏幕宽度来决定html的基础字体的大小，在body内的块级元素的话就可以用rem或者em单位来对页面进行布局了。其中的不同是rem是基于body的font-size来确定的，而em则是根据其父元素的font-size来决定的，可以说各有利弊，如果是将设计稿转换为Html的话，使用媒体查询+rem比较方便计算出每个的数据，而em可能相对麻烦一下，但是在调节页面的时候，如果使用了em布局，如果只是想页面的某一块的大小进行调整，那么只需要更改其父元素的em大小即可，不用更改其每个子元素。因此使用rem和em都是根据个人的情况和实际项目来决定。

 1 @media screen and (min-width: 320px) {html{font-size:50px;}}
 2 @media screen and (min-width: 360px) {html{font-size:56.25px;}}
 3 @media screen and (min-width: 375px) {html{font-size:58.59375px;}}
 4 @media screen and (min-width: 400px) {html{font-size:62.5px;}}
 5 @media screen and (min-width: 414px) {html{font-size:64.6875px;}}
 6 @media screen and (min-width: 440px) {html{font-size:68.75px;}}
 7 @media screen and (min-width: 480px) {html{font-size:75px;}}
 8 @media screen and (min-width: 520px) {html{font-size:81.25px;}}
 9 @media screen and (min-width: 560px) {html{font-size:87.5px;}}
10 @media screen and (min-width: 600px) {html{font-size:93.75px;}}
11 @media screen and (min-width: 640px) {html{font-size:100px;}}
12 @media screen and (min-width: 680px) {html{font-size:106.25px;}}
13 @media screen and (min-width: 720px) {html{font-size:112.5px;}}
14 @media screen and (min-width: 760px) {html{font-size:118.75px;}}
15 @media screen and (min-width: 800px) {html{font-size:125px;}}
16 @media screen and (min-width: 960px) {html{font-size:150px;}}

 

　　　　百分比布局

　　　　对于不同的屏幕宽度，使用百分比布局也是一种动态适配的好方法，尤其是有事在需要让几个元素充满整行的情况，分别用百分比相对于使用rem或者em来设置其宽度更为方便，省去了计算的麻烦，因此在实际的操作中我常常使用rem和百分比相结合的布局方法。

• Js控制

　　　　js控制的原理是利用initial-scale属性对屏幕进行缩放，如下面的代码，在切图的过程中，所有的尺寸都是基于750px屏幕宽度下进行布局，所以只需要以实际尺寸与750px的比例来把页面缩放就可以达到动态适配的目的。这个方法虽然看起来很简单，但是因为用了js还需要考虑到浏览器的兼容性问题，可以去参考一下PPK关于viewport的几个看法。

1 (function(){
2         var rate=screen.width/750;
3         console.log(rate);
4         document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+rate+'">');
5     })();

 

转载于:https://www.cnblogs.com/cheerup/p/6179496.html