PC端和移动端自适应问题的快速解决方法

         imgURL = "1400.png";//设置不同分辨率下的图片   

     }   

     else if (1024 < screenWidth && screenWidth < 1440)    

     {   

         width = "1200px";   

         imgURL = "1200.png";   

     }    

      else {   

          width = "980px";   

          imgURL = "980.png";   

        }   

       obj.style.width=width ;   

       obj.style.backgroundImage="url(" + imgURL + ")";   

  })  

五：移动端的自适应高度和宽度

移动端的相对要简单些，首先，在网页代码的头部，加入一行viewport标签。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport是网页默认的宽度和高度，上面的意思表示，网页的宽度默认等于设备屏幕的宽度，原始缩放比例为1，即网页初始大小占屏幕面积的100%。

1：由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%;或者width:auto;

2：一般使用em,尽量少使用px字体

3：使用流动布局

4：自适应网页设计”的核心，就是CSS3引入的media query模块。

自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 400px)" href=http://www.jb51.net/web/"style.css" /> -------当屏幕小于400时，就加载style.css这个文件 

5：除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url("style2.css") screen and (max-device-width: 800px);//当小于800px屏幕时，就加载style2.css文件

6:图片的自动缩放，比较简单。只要一行CSS代码：img{ max-width: 100%;}建议根据不同的屏幕分辨率，加载不同大小像素的图片。 

移动端的自适应，大体上差不多就这么多，主要核心是利用mediaquery,根据不同的屏幕大小，实现不同的布局。代码可看上面的列子。这里不再重复写。

以上这篇PC端和移动端自适应问题的快速解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!