web的适配问题

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

正常PC浏览时：

正常PC

移动端

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

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

希望能举举例子说明

阅读 2.9k

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

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

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

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

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

web的适配问题

一个例子

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？