All geek questions in one place

CSS Media requests do not work on mobile devices

I will keep it short. Using Zurb Foundation 5 to create a site. Media requests do not work. The code is as follows:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>...</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/vendor/modernizr.js"></script>
</head>

The corresponding CSS is configured as follows:

    #examplediv {
    style:background-image;
    }

    @media only screen and (max-width: 40em) { 
        #examplediv {
        style:different-background-image;
    }
    }

Using em in a media request, for this page

Any ideas? Come here. Thanks!

+4
source share
2 answers

Using this meta tag and media query,

<header>
 <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>




  /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px) {
    /* Styles */
    }

    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
+8
source

, Foundation.css. CSS . . .

     @media only screen and (max-width: 40em) {  
      body {
         background-color: yellow;
           }
     }

     @media only screen and (min-width: 41em) { 
      body {
         background-color: red;
           }
     }

Background-color .

0

Source: https://habr.com/ru/post/1524894/

More articles:


All Articles