首页 > HTML网页如何做到自适应

HTML网页如何做到自适应

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


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


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


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


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


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

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

}

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

本人新手,望补充。


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


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


自适应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">


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

body {
    background-color:lightblue;
}

}
2:宽度设置为百分比
3:rem单位(主要用于移动端)


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

【热门文章】
【热门文章】