Question

关于一个HTML/CSS自适应的问题

我一开始是在台式电脑上做网页的（因为屏幕比较大，所以里面的DIV宽和高都是设置好的，而且都设置得比较大）。回家以后拿手提打开，傻眼了= =手提的屏幕比台式的小很多，一个屏幕没法全部显示所有内容，要拉动浏览器下方的滚动条才能看过去。想问的是，要加些什么代码，才能让我网页的内容根据设备自适应调整宽高呢？我看网上的一些网页全都是自适应的，不管是我的手提还是大屏电脑，都是一个屏幕就能放完全部内容，不会出现我现在遇到的这种情况。本人小白，刚学这个没多久，求问各路大佬能解决此问题的话再改悬赏~

Answer 1

以下几种方式：

1、css把宽度设置成百分比，width:100%;左右布局按一定比例设置好 ，需要多次调试，保证不同分辨率下的美观性。

2、根据不同分辨率或者不同屏幕大小定义相应的CSS文件。一般多采用这种方式。比如：

<link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/>
        <script type="text/javascript">
            window.onload=function(){ 
                var sc=document.getElementById("links"); 
                    if(window.screen.width>1024) //获取屏幕的的宽度 
                    { 
                        sc.setAttribute("href","../css/css1.css"); //1024屏幕
                    } 
                    else{ 
                        sc.setAttribute("href","../css/css2.css"); //其他
                    } 
            }
        </script>