web的适配问题

2016/12 01 13:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于bwin娱乐官网的点点滴滴

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;
}

(看完/读完)这篇文章有何感想! 来看看bwin娱乐官网是怎么评论的吧!

--转载请注明: bwin娱乐官网_bwin娱乐官网平台_bwin娱乐官网平台下载 » web的适配问题

发表评论

(必填)