猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

web的适配问题

1.发现不少网页的响应式很好，这个是如何实现的。如下效果：

  • 正常PC浏览时：

https://img3.mukewang.com/5bcc37090001a42511150573.jpg

  • 移动端

https://img2.mukewang.com/5bcc37150001ed2e05570347.jpg

注：我把代码保存到本地时将meta、js都注释掉了，只保留了一个core.css，显示效果一致，但是没看到具体是如何做到的啊？

2.还有其他方式做适配么？好像看见有流式布局的

希望能举举例子说明


凤凰求蛊
浏览 497回答 1
1回答

慕莱坞森

这是用到了media query(媒体查询)。好处就是仅仅使用css就可以对不同设备宽度进行适应，缺点就是要针对不同设备宽度，每个宽度范围都要写一套css，代码量大（不过现在的设备宽度适应基本都是用的media query来实现的）。一个例子<!DOCTYPE&nbsp;html><html&nbsp;lang="en"><head> &nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8"> &nbsp;&nbsp;&nbsp;&nbsp;<title>Document</title> &nbsp;&nbsp;&nbsp;&nbsp;<style> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.container&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:hidden; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;300px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;red;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;50%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;2px&nbsp;green&nbsp;solid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;-2px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@media&nbsp;only&nbsp;screen&nbsp;and&nbsp;(max-width:&nbsp;768px){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.box&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</style></head><body> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box"></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div></body></html>其中的@media&nbsp;only&nbsp;screen&nbsp;and&nbsp;(max-width:&nbsp;768px){&nbsp;&nbsp;&nbsp;&nbsp;.box&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;} }意思就是在设备屏幕宽度在0~768px的范围时生效的一套css
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript