CSS3 Media Queries模板

 

使用max-width

@media screen and (max-width: 600px) {
            //你的样式放在这里....
        }

 

使用min-width

        @media screen and (min-width: 900px) {
            //你的样式放在这里...
        }

max-width和min-width的混合使用

@media screen and (min-width: 600px) and (max-width: 900px) {
            //你的样式放在这里...
        }

 

同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用：

iPhone和Smartphones上的运用

/* iPhone and Smartphones (portrait and landscape) */
        @media screen and (min-device-width : 320px) and (max-device-width: 480px) {
            //你的样式放在这里...
        }

 

max-device-width指的是设备整个渲染区宽度（设备的实际宽度）

iPads上的运用

/* iPads (landscape) */
        @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
            //你的样式放在这里...
        }
        /* iPads (portrait) */
        @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
            //你的样式放在这里...
        }

 

针对移动设备的运用，如果你想让样式工作得比较正常，需要在“<head>”添加“viewport”的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。

调用独立的样式表

你可能希望在不同的设备下调用不同的样式文件，方便管理或者维护，那么你可以按下面的这种方式进行调用：

<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" />
<link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />

 

CSS3 Media Queries在标准设备上的运用

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：

1、1024px显屏

@media screen and (max-width : 1024px) {
            /* CSS Styles */
        }

 

2、800px显屏

@media screen and (max-width : 800px) {
            /* CSS Styles */
        }

 

3、640px显屏

@media screen and (max-width : 640px) {
            /* CSS Styles */
        }

 

4、iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {
            /* CSS Styles */
        }

 

5、iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {
            /* CSS Styles */
        }

 

iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
            /* CSS Styles */
        }

 

现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：

复制代码
// Landscape phones and down
    @media (max-width: 480px) { ... }
     
    // Landscape phone to portrait tablet
    @media (max-width: 768px) { ... }
     
    // Portrait tablet to landscape and desktop
    @media (min-width: 768px) and (max-width: 980px) { ... }
     
    // Large desktop
    @media (min-width: 1200px) { .. }
复制代码

 

 

更新CSS3 Media Queries模板查询

1、Smartphones (portrait and landscape)

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

 

2、Smartphones (landscape)

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

 

3、Smartphones (portrait)

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

 

4、iPads (portrait and landscape)

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

 

5、iPads (landscape)

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

6、iPads (portrait)

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

 

7、iPhone 4

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

 

8、640px显屏

@media screen and (max-width : 640px) {
    /* CSS Styles */
}

 

9、800px显屏

@media screen and (max-width : 800px) {
    /* CSS Styles */
}

 

10、1024显屏

@media screen and (max-width : 1024px) {
    /* CSS Styles */
}

 

11、Desktops and laptops

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

 

12、Large screens

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

 

 
posted @   一点点白  阅读(286)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae