HTML网页如何做到自适应

Question

前端新手，想问一下大家如何做到的网页随浏览器大小变化的自适应的？

Answer 1

一种使用media query的网格布局，通过media query判断屏幕大小来呈现不同效果。bootstrap就是其中代表
还有一种是使用rem布局，这种做法可以实现对设计图的一比一还原。淘宝，网易都是使用该方法。

Answer 2

高宽采取百分数的方法，外加媒体查询等方式都可以，建议查询 “响应式布局”进行深入了解。

Answer 3

CSS3新增了 media queries 属性。
具体可搜索——> 响应式布局

Answer 4

自行百度css3媒体查询，对应的样式放在对应的宽度里面。

Answer 5

可以先了解bootstrap的栅格式布局

Answer 6

1：媒体查询
@media screen and (max-width: 300px) {

body {
    background-color:lightblue;
}

}
2：宽度设置为百分比
3：rem单位（主要用于移动端）

Answer 7

1.<meta name="viewport" content="width=device-width, initial-scale=1">(content里面的值可以去网上找)

2.media screen and (max-width/min-width){ //当屏幕宽度满足这个条件时，会执行花括号里面的样式

}

3.宽度百分比 不要用绝对值

本人新手，望补充。

Answer 8

建议查询一下响应式布局，了解清楚之后再去写页面

Answer 9

建议使用media query的布局，我用的就是bootstrap的框架，里面的class="container"基本上已经帮你做好了响应式布局。还有里面的class="row"，也能更好的让你对网页进行分区操作。

Answer 10

自适应web制作步骤和注意点
1.布局需要用流式布局，就是使用百分比
2.内部元素根据需要，不必都用百分比，比如按钮，大小不变就用固定值
3.百分比如果和绝对值混合使用，可使用以下方法

<div class="a"></div><div class="b">测试</div>
 .a{
    width:100px;
    height: 100px;
    background-color: red;
    float:left;
   }
.b{
   width:100%;
   height: 100px;
   background-color: blue;
}

如果想做响应式（根绝不同设备宽度改变布局来达到良好的显示效果）
1.在自适应的基础上使用media媒体查询，单独对不同宽度进行适配
2.在html 中加入<meta name="viewport" content="width=device-width,initial-scale=1.0">