相同的类在不同的页面上看起来不同

-1

在桌面上看起来很好，但是当您查看移动版本时，主页上的类“.game-box”看起来很好，但在其他页面上，该类中的文本看起来很小。

我在SCSS中编写了样式。以下是完整的代码：

/* MIXIINS */ 
@mixin hFonts($font-size, $device-font-size) { 
    font-size: $font-size; 
    font-family: $font-serif; 
    color: $font-color-med; 

    @media screen and (max-device-width: $media-mobile-med) { 
     font-size: $device-font-size; 
    } 
} 

/* FONTS */ 
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); 
@import url("https://fonts.googleapis.com/css?family=Alegreya:700"); 

$font-serif: 'Alegreya', serif; 
$font-sans: 'Source Sans Pro', sans-serif; 

$font-color-dark: #222; 
$font-color-med: #444; 
$font-color-light: white; 

$font-size-small: 12px; 
$font-size-med: 16px; 
$font-size-large: 24px; 
$font-size-xl: 32px; 
$font-size-xxl: 48px; 

$font-size-nav: 19px; 


/* COLORS & BACKGROUNDS */ 
@import 'gradient'; 

$websiteBackground: #343434 url("/img/footer_lodyas.png"); 
$navBackground: #505050 url("/img/tweed.png"); 

$contentBackgroundColor: ghostwhite; 
$sidebarColor: ghostwhite - #111; 


/* VARIABLES */ 
$headerHeight: 150px; 
$navHeight: $headerHeight - 90px; 
$imgPosition: $headerHeight - 184px; 
$titlePosition: ($headerHeight - $navHeight)/2 - 18px; 

$foot-height: 90px; 

$sidebarWidth: 300px; 
$gutter: 10px; 

$media-narrow: 845px; 

$media-mobile-small: 640px; 
$media-mobile-med: 720px; 
$media-mobile-large: 1080px; 


/* RESET */ 
%reset { margin: 0; padding: 0; } 
html, body {@extend %reset; background: $websiteBackground; height: 100%;} 
div {@extend %reset;} 
h1 { @include hFonts($font-size-large, $font-size-xxl); } 
h2 { @include hFonts($font-size-med, $font-size-xl); } 
p, li, a, q, blockquote { font-family: $font-sans; color: $font-color-med;} 


/* CLASSES */ 

.container { padding: 0 $gutter; } 
.light-text { color: $font-color-light; } 
.link-inactive { text-decoration: line-through; } 


.game-box { 
    font-family: $font-sans; 
    float: left; 
    width: calc(33% - 2 * #{$gutter}); 
    min-height: 300px; 
    margin: $gutter; padding: 0; 

    border: 1px solid blue; 
    border-radius: $gutter/2; 
    overflow: hidden; 
    box-shadow: 1px 1px $gutter/2 0 black; 
    background-color: white; 

    .box-title { 
     padding: $gutter; 
     color: $font-color-light; 
     @extend .blueGradient; 
    } 

    .box-description { 
     padding: 0 $gutter; 
    } 

    @media screen and (max-device-width: $media-mobile-med) { 
     margin: 2 * $gutter; 
     width: calc(100% - 4 * #{$gutter}); 
     font-size: $font-size-large; 
    } 
} 

.top-image { 
    background: { 
     position: center center; 
     size: cover; 
     repeat: no-repeat; 
    } 
    width: 100%; height: 360px; 
    float: right; 

    &--main { 
     @extend .top-image; 
     background-image: URL("/img/epicFrontPage.png"); 
     height: 500px; 
    } 

    &--syshack { 
     @extend .top-image; 
     background-image: URL('/img/SysHackGamePhoto.png'); 
    } 
} 

.quarter-image { 
    float: right; 
    width: calc(25%); 
} 

/* ELEMENTS & ID'S */ 

#wrapper { 
    max-width: 1080px; width:100%; min-width:720px; 
    height: 100%; 
    margin: 0 auto; 
} 

header { 
    float: left; 
    width: 100%; height: $headerHeight; 
    @extend .blueGradient; 

    nav { 
     background: $navBackground; 
     height: $navHeight; 
    } 

    h1 { 
     display: inline-block; 
     color: $font-color-light; 
     margin-top: $titlePosition; 
     margin-left: 290px; 
     font-size: $font-size-xl; 

     @media screen and (max-device-width: $media-mobile-med) { 
      margin-top: 15px; 
      font-size: $font-size-xxl; 
     } 
    } 

    #teg-brain { 
     position: absolute; 
     top: $imgPosition; 
    } 
} 

#nav-menu { 
    float: right; 
    margin: 0; padding: 0; 

    li { 
     display: inline-block; 
     @extend %reset; 
     color: $font-color-light; 
     text-decoration: none; 
     font-size: $font-size-nav; 

     a { 
      display: inline-block; 
      color: inherit; 
      text-decoration: inherit; 
      font-size: inherit; 
      padding: 18px $gutter; 

      @media screen and (max-device-width: $media-mobile-med) { 
       padding: 10px $gutter; 
      } 
     } 

     & > ul.submenu { 
      position: absolute; 
      top: $navHeight; 
      //margin-left: 22px; 
      padding-left: 0; 
      display: none; 
      z-index: 10; 

      li { 
       background-color: rgb(64,64,64); 
       display: block; 

       a { display: block; padding: 18px $gutter; } 

       &:hover { 
        background-color: rgb(128,128,128); 
       } 
      } 

      @media screen and (max-device-width: $media-mobile-med) { 
      margin-left: 51px; 
     } 
     } 

     &:hover { 
      background-color: rgba(255,255,255,.2); 

      & ul.submenu { 
       display: block; 
      } 
     } 

     @media screen and (max-device-width: $media-mobile-med) { 
      font-size: $font-size-xl; 
      // padding: 9px $gutter; 
     } 
    } 
} 

#main { 
    float: left; 
    width: 100%; 
    background-color: $contentBackgroundColor; 
    min-height: calc(100% - #{$headerHeight}); 
    //overflow-y: auto; 
    //overflow-x: hidden; 
} 

#latest-news { 
    font-size: 16px; 
    float: left; 
    width: calc(100% - 2 * #{$gutter}); 

    @media screen and (max-device-width: $media-mobile-med) { 
     font-size: $font-size-large; 
    } 
} 

#BMG-meetup { 
    margin: $gutter; 
    @media screen and (max-device-width: $media-mobile-med) { 
     display: none; 
    } 
} 

blockquote { 
    background-color: $contentBackgroundColor - #111; 
    border-left: $gutter solid #{$contentBackgroundColor - #333}; 
    margin: 1.5em $gutter; 
    padding: 0.5em $gutter; 
    quotes: "\201C""\201D"; 

    &:before { 
     color: $font-color-med; 
     content: open-quote; 
     font-size: 4em; 
     line-height: 0.1em; 
     margin-right: 0.25em; 
     vertical-align: -0.4em; 
    } 

    p { display: inline; } 
} 
/* 
#sidebar { 
    float: left; 
    background-color: $sidebarColor; 
    width: $sidebarWidth - 2 * $gutter; 
    min-height: calc(100% - #{$headerHeight}); 
} 
*/ 
#mc_embed_signup { 
    float: right; 
    width: $sidebarWidth; 
    font:14px Helvetica,Arial,sans-serif; 

    @media screen and (max-width: $media-narrow) { 
     display: none; 
    } 
} 
#mc_embed_signup input.button { display: inline-block; } 
#mc_embed_signup input.email { display: inline-block; }

来源

2016-10-04 Paul

请在此处附上您的相关代码....请勿链接到您的网站。 – DaniP

对不起。我已删除链接。 – Paul

我在此媒体查询中将字体大小更改为2em，看起来好像看起来更好。

@media screen and (max-device-width: 720px) 
.game-box, .game-box--right { 
    margin: 20px; 
    width: calc(100% - 4 * 10px); 
    font-size: 2em; 
}

来源

2016-10-04 19:30:11

相同的类在不同的页面上看起来不同

回答

相关问题