• Responsive设计——不同设备的分辨率设置


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

    1.1024px显屏

    @media screen and (max-width : 1024px) {                    
    /* 样式写在这里 */          
    }     

    2.800px显屏

    @media screen and (max-width : 800px) {              
    /* 样式写在这里 */          
    }     

    3.640px显屏

    @media screen and (max-width : 640px) {              
    /* 样式写在这*/            
    }     

    4.iPad横板显屏

    @media screen and (max-device- 1024px) and (orientation: landscape) {              
    /* 样式写在这 */            
    }     

    5.iPad竖板显屏

    @media screen and (max-device- 768px) and (orientation: portrait) {         
    /* 样式写在这 */            
    }     

    6.iPhone  Smartphones

    @media screen and (min-device- 320px) and (min-device- 480px) {              
    /* 样式写在这 */            
    }     

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

    @media (max- 480px) { ... }              

    @media (max- 768px) { ... }              

    @media (min- 768px) and (max- 980px) { ... }      

     @media (min- 1200px) { .. }

  • 相关阅读:
    第十一章 练习。内附100道练习题URL
    第八章 模块;第九章 文件
    mysql union和join 的使用
    第七章 循环
    第六章 课后习题
    第六章 字符串操作
    第五章 课后习题
    第五章 容器之字典
    实战智能推荐系统笔记
    协同过滤推荐算法的原理及实现
  • 原文地址:https://www.cnblogs.com/gulan/p/5849622.html
Copyright © 2020-2023  润新知