Question

我有一个网站，其中填充和边距在设备之间显示不同。我在Android设备和台式机上都有相同网站的屏幕截图：

移动设备中的网站：

Mobile

桌面调整大小：

Desktop, resized

这是CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* Diario */
* {
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    font-family: Arial, sans;
    font-size: 0.9em;
    background-color: #ccc;
}
h1 {
    font-weight: bold;
    font-size: 130%;
    margin-bottom: 0.5em;
}

#page {
}
#page header {
    font-weight: bold;
    padding: 1em;
    color: #fff;
    background-color: #000;
}
#page footer {
    color: #fff;
    background-color: #000;
    text-align: center;
    padding: 1em;
}

#page article {
    padding: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2em;
    background-color: #fff;
    box-shadow: 0 0.2em 0.5em #000;
}
#page article p {
    margin-bottom: 0.5em;
}
#page article p.meta {
    font-size: 85%;
    color: #999;
}

#big {
    margin-bottom: 2em;
}
#big article {
}


#normal {
}
#normal article {
}

#normal article:last-child {
    margin-bottom: 0;
}

HTML标记：

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>El diario - <?php echo date('d-m-Y') ?></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <div id="page">

            <header>
                <p>El diario - <?php echo date('d-m-Y') ?></p>
            </header>

            <section id="big">
                <article class="main">
                    <h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
                    <p class="meta">Publicado hace 2 días</p>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>

                <article class="sub">
                    <h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
                    <p class="meta">Publicado hace 2 días</p>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>

                <article class="sub">
                    <h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
                    <p class="meta">Publicado hace 2 días</p>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>

                <article class="sub">
                    <h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
                    <p class="meta">Publicado hace 2 días</p>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>
            </section>

            <section id="normal">
                <article>
                    <h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
                    <p class="meta">Publicado hace 2 días</p>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>

                <article>
                    <h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
                    <p class="meta">Publicado hace 2 días</p>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>
            </section>

            <footer>
                (C)<?php echo date('Y') ?> Leprosystems
            </footer>
        </div>
    </body>
</html>

有什么想法吗？我正在寻找类似的问题，到目前为止我唯一找到的答案是添加-text-size-adjust: none;代码，但它没有任何区别。

Answer 1

也许我明白错误的问题，但我认为他的问题是为什么他的网站在不同的浏览器中有不同的边距。

在这种情况下，您必须知道：

每个浏览器都有自己的默认“用户代理”样式表，用于使无样式的网站看起来更清晰。例如，大多数浏览器默认情况下使链接为蓝色，访问链接为紫色，为表提供一定量的边框和填充，将可变字体大小应用于H1，H2，H3等，并对几乎所有内容应用一定量的填充。 - http://www.cssreset.com/what-is-a-css-reset/

要解决此问题，您可以使用“css reset”，例如规范化（https://github.com/necolas/normalize.css），无论网络浏览器如何，都会使您的网站看起来一样。

Answer 2

@media screen and(min-width:320px){
//what ever styles.
}

@media screen and(min-width:990px){
//what ever styles.
}

媒体查询最适合此同意

Answer 3

拔了我的头发好几天之后，回答（简单，像往常一样有这种问题）：

<meta name="viewport" content="initial-scale=1">

因此，在踢完自己之后，我建立了一条规则：在开发设备兼容性时，始终使用viewport metatag。

Answer 4

它有什么不同？您始终可以使用通用css选择器*执行“重置”

*{padding:0;margin:0;}

手机和手机中的相同CSS桌面具有不同的边距/填充

4 个答案: