怎么把自己写的网页实现自适应浏览器大小啊，我整个网页只是用了四个div，很好管理，但是不知道怎么设置

Question

这下面是我的源码，我就是不知道怎么设置自适应，在不同的设备上总是有乱码的情况#all { width: 100%; height: 1000px; background-color: #FFF; border-size: 0px; border-color: red; margin: 0;}#top { width: 100%; height: 10%; background-color: white; text-align: center;}#left { width: 20%; height: 90%; background-color: white; float: left; text-align: right; font-family: "宋体";}#center { width: 60%; height: 90%; float: left; text-align: center; text-decoration: none; font-family: "宋体"; margin: 0; padding: 0;}#right { width: 15%; height: 90%; background-color: white; text-align: cneter; font-family: "宋体"; border-color: #0CF; border-left-style: dashed; border-bottom-style: dashed;}.righttwo { border-top: 0px solid red; border-right: 0px solid blue; border-bottom: 1px solid orange; border-left: 3px solid pink;}#bottom { width: 100%; height: 20%; float: left; background-color: white; text-align: center; font-family: "宋体";}

Answer 1

如果是要做成适应不同设备的话，head部分的标签要加上 <meta name="viewport" content="width=device-width, initial-scale=1.0">，然后在布局的时候，div以百分比的形式来写，你现在的界面出现错乱，是因为当界面分辨率小的时候，有些内容自身的宽度超过了外侧div的宽度，此时就应该使用“媒体查询”，就是@media
如果你想要写起来简单一点，可以看一下框架bootstrap它就是一个适应不同设备的框架，就算是你不喜欢用框架，也可以学习一下它的布局方式、。