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

<div id="left">左边</div>  

<div id="right">右边</div>  

css部分：   

#body{width:100%;float:left;} //设置浮动和width:100%   

#body #center{background:red;margin-left:200px;margin-right:300px;} //margin-left:100%的使用方法   

#left{width:200px;background:yellow;margin-left:-100%;float:left}   

#right{width:300px;background:blue;margin-left:-300px;float:left}   

-----如果设置为margin-left:-100%，则会跑到body的左边。   

-----如果设置为margin-left:-300px（即right的宽度），则会跑到body的右边  

3.关于最小宽度和最大宽度

这里依然结合布局来看，如下面的代码：自适应宽度，从而改变布局。

XML/HTML Code复制内容到剪贴板

//html部分   

<div id='container'>  

    <div class='one'></div>  

    <div class='two'></div>  

    <div class='three'></div>  

 </div>  

//css部分   

#container{width:100%;}   

.one{width:20%;background:red；}   

.one,.two,.three{float:left; height:100px;}   

.two{width:60%;background:yellow;}   

.three{width:20%;background:blue;}   

@media (max-width:800px){--如果浏览器小于800px   

  .one{width:40%;}   

  .two{width:60%}   

  .three{width:100%}   

}   

@media (max-width:400px)--如果浏览器宽度小于400px   

{   

   .one{width:100%}   

   .two{width:100%}   

   .three{width:100%}   

}  

理解什么叫最小宽度和最大宽度，最小宽度指为元素设置的最小宽度，到达最小宽度后，缩放文本不会起到任何作用

最大宽度是所有元素所能达到的一个上限，不能再继续往上增加。

三： css处理自适应高度

XML/HTML Code复制内容到剪贴板

//html部分代码   

<div id="fit"></div>  

//css代码   

html,body{margin:0;height:100%;}   

#fit{width:200px;background:yellow;height:100%;border:1px solid red;}   

--这里同时给html和body加样式，是为了兼容各大浏览器。   

   IE 处于混杂模式时，body以窗口为高度参照，body设置为100%就可以使得页面和窗口一样高，body里面的嵌套div也可以扩展到窗口高度，   

这样的话可以使布局适应浏览器窗口大小。窗体 》body》div  (html ,body {overflow:scroll}  一层滚动条)    

     但是当处于标准模式时，body以html标签为高度参照，html标签才以窗口为参照，所以仅仅body 100%，并不能使它的子div100% 占据整个屏幕   

还要使得 html 100%使得 html获得窗口大小才行。窗体》html》body》div (html ,body {overflow:scroll}  两层滚动条 ,html的滚动条从来不会用到)  

父级随子级高度变化而自适应变化与子级随父级高度变化而变化

XML/HTML Code复制内容到剪贴板

<div id="fj">  

   我是父级   

（编辑：焦作站长网）

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