javascript - web的适配问题-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - web的适配问题

ringa_lee 2017-04-11 13:30:12

[JavaScript讨论组]

392

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

正常PC浏览时：

移动端

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

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

希望能举举例子说明

ringa_lee

全部回复(3)

PHP中文网2017-04-11 13:32:12 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>
    <p class="container">
        <p class="box"></p>
        <p class="box"></p>
    </p>
</body>
</html>

其中的

@media only screen and (max-width: 768px){
    .box {
        width: 100%;
    }
}

意思就是在设备屏幕宽度在0~768px的范围时生效的一套css

赞 +0

添加回复

PHP中文网2017-04-11 13:32:12 2楼

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

赞 +0

添加回复

PHP中文网2017-04-11 13:32:12 1楼

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

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

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>