zoukankan      html  css  js  c++  java
  • 201509280825_《css3——media query整理2》

    1、Smartphones (竖板和横板)

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    			/* 你的样式写在这里 */
    		}

    2、Smartphones (横板)
    @media only screen and (min-width : 321px) {
    			/* 你的样式写在这里 */
    		}

    3、Smartphones (竖板)
    @media only screen and (max-width : 320px) {
    			/* 你的样式写在这里 */
    		}

    4、iPad(竖板和横板)
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    			/* 你的样式写在这里 */
    		}

    5、iPad横板
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)	and (orientation : landscape) {
    			/* 你的样式写在这里 */
    		}	

    6、iPad的竖板
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    			/* 你的样式写在这里 */
    		}

    7、Desktops and laptops
    @media only screen and (min-width : 1224px) {
    			/* 你的样式写在这里 */
    		}

    8、Large screens
    @media only screen and (min-width : 1824px) {
    			/* 你的样式写在这里 */
    		}

    9、iPone4
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
    			/* 你的样式写在这里 */
    		}

    10、iPhone4竖板
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),	only screen and (min-device-pixel-ratio : 1.5)  and (orientation:portrait){
    		/*你的样式写在这里*/	
    	        }

    11、iPhone4横板
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5)  and (orientation:landscape){
    			/*你的样式写在这里*/
    		}

    12、iPad 3 Media Query
    @media only screen and (min-device- 1536px) and (max-device- 2048px) and (-webkit-min-device-pixel-ratio: 2)
    {
    /*你的样式写在这里*/
    }
     
    前端-语言
  • 相关阅读:
    图片处理
    RBAC打造通用web管理权限
    决定人生的三种成本:机会成本,沉没成本,边际成本
    实验楼可以做各种程序实验
    .net2.0 C# Json反序列化
    不装mono,你的.NET程序照样可以在Linux上运行!
    .net framework4与其client profile版本的区别
    spark transform系列__sortByKey
    自己主动化开发測试的一些理论根据及经验总结(2015)
    Toast分析——实现自己的Toast
  • 原文地址:https://www.cnblogs.com/beesky520/p/4843211.html
Copyright © 2011-2022 走看看