web的适配问题

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

  • 正常PC浏览时:

  • 移动端

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

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

希望能举举例子说明

这是用到了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

基本思路就是根据屏幕大小,你需要把部分内容隐藏、替换显示。
至于怎么去实现,可以参考bootstrap3

谢谢楼上大家的答案,但是我删除所有的@media等语句之后发现仍然结果是这样的,后来我想到了

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

所以我尝试加上之后,果然就不对了。这个页面只做了各种尺寸的适配,但是并没有使用viewport…我把下载的源文件,加上上面那行后,一切不出意外的不行了。仔细看了一下原来的代码,整个内容区基本都是px,所以用媒体查询修改了最外面容器的大小好像也没有什么用。然后再看了下PC端页面的效果,拉伸窗口大小发现:到了一定的大小后显示水平滚动条,然后查看代码发现如下代码:

body { padding-top: 0; min-width: 1205px;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注