web的适配问题

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

  • 正常PC浏览时:

正常PC

  • 移动端

    移动端

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

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

希望能举举例子说明

阅读 2.9k
3 个回答

这是用到了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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题