移動和桌面中具有不同邊距/填充的相同CSS

我有一個站點，其中填充和邊距在設備之間顯示不同。我有同樣的網站的截圖在Android設備，並在我的桌面PC：移動和桌面中具有不同邊距/填充的相同CSS

網站在移動設備：

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;一段代碼，但它沒有任何區別。

來源

2014-01-30 Leprosy

爲什麼不使用媒體查詢？在這裏看看設備的一些默認定義。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – zewa666

是的，我將使用媒體查詢，但這必須先解決... – Leprosy

拉我的頭髮天，答案（簡單，像往常一樣與這種問題）後：

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

所以，踢自己之後，我配合建立一個規則：始終使用開發時viewport元標記設備兼容性。

來源

2014-02-04 14:42:03 Leprosy

-1

它有什麼不同？您可以隨時使用通用的CSS選擇器*做一個「復位」

*{padding:0;margin:0;}

來源

2014-01-30 19:38:45

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

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

媒體查詢將這一同意

來源

2014-01-30 19:39:37

做到最好也許我理解這個問題錯了，但我認爲他的問題是爲什麼他的網站在不同的瀏覽器中有不同的利潤率。

在這種情況下，你必須知道的是：

每個瀏覽器都有自己默認的「用戶代理」的樣式表，它使用使無樣式的網站顯得更加清晰可辨。例如，大多數瀏覽器默認爲鏈接藍色，訪問鏈接爲紫色，爲表格提供一定數量的邊框和填充，將可變字體大小應用於H1，H2，H3等，以及幾乎所有的填充。 - http://www.cssreset.com/what-is-a-css-reset/

爲了解決這個問題，你可以使用「CSS復位」像規範化（https://github.com/necolas/normalize.css），這將讓你的網站看起來都一樣，不管網絡瀏覽器。

來源

2014-01-30 20:01:08

我在頂部進行重置的CSS無風格表單 – Leprosy

移動和桌面中具有不同邊距/填充的相同CSS

回答

相關問題