1.发现不少网页的响应式很好，这个是如何实现的。如下效果：正常PC浏览时：移动端注：我把代码保存到本地时将meta、js都注释掉了，只保留了一个core.css，显示效果一致，但是没看到具体是如何做到的啊？2.还有其他方式做适配么？好像看见有流式布局的希望能举举例子说明
1 回答
慕莱坞森
TA贡献1810条经验 获得超4个赞
这是用到了media query(媒体查询)。好处就是仅仅使用css就可以对不同设备宽度进行适应，缺点就是要针对不同设备宽度，每个宽度范围都要写一套css，代码量大（不过现在的设备宽度适应基本都是用的media query来实现的）。
一个例子
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container { overflow:hidden;
} .box { height: 300px;
background-color: red; width: 50%;
float: left; border: 2px green solid; margin: -2px;
}
@media only screen and (max-width: 768px){ .box { width: 100%;
}
} </style></head><body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div></body></html>其中的
@media only screen and (max-width: 768px){ .box { width: 100%;
}
}意思就是在设备屏幕宽度在0~768px的范围时生效的一套css
添加回答
举报
0/150
提交
取消