时间戳

首页 > 解决方案 > CSS中的断点

css - CSS中的断点

问题描述

我做错了什么？

哪个 div 将出现它不取决于分辨率，而是在 css 文件中的顺序。

如果缺少某些内容，我可能会删除它，因为我必须剪切代码并添加更多细节:)

这是HTML：

 <html>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styl.css">
    </head>
    <div class="laptop">Laptop</div>
    <div class="ajpad_poziom">Ajpad poziom</div>
    <div class="ajpad_pion">Ajpad pion</div>
    <div class="cos_poziom">Cos poziom</div>
    <div class="cos_pion">Cos pion</div>
    <div class="tel_poziom">Tel poziom</div>
    <div class="tel_pion">Tel pion</div>

Css 文件：

 @media only screen and (min-width: 550px) and (orientation:landscape)) {
        .laptop{display:none;}
        .ajpad_poziom{display:none;}
        .ajpad_pion{display:none;}
        .cos_poziom{display:none;}
        .cos_pion{display:none;}
        .tel_poziom{display:block;}
        .tel_pion{display:none;}            
    }
    
    @media only screen and (min-width: 741px) and (orientation:landscape) {
        .laptop{display:none;}
        .cos_poziom{display:block;}
        .cos_pion{display:none;}
        .tel_poziom{display:none;}
        .tel_pion{display:none;}            
    }
    
    
    
    
    @media only screen and (min-width: 1000px) and (orientation: landscape) {
        .laptop{display:none;}
        .cos_poziom{display:none;}
        .cos_pion{display:none;}
        .tel_poziom{display:none;}
        .tel_pion{display:none;}
        
    }
    
    /* Extra large devices (large laptops and desktops, 1200px and up) 
    portrait
    
    */
    @media only screen and (min-width: 1400px) {
        .laptop{display:block;}
        .cos_poziom{display:none;}
        .cos_pion{display:none;}
        .tel_poziom{display:none;}
        .tel_pion{display:none;}
    }

标签： csswidthmedia

解决方案

推荐阅读