• CSS媒体查询判断


    <link rel="stylesheet" media="screen and (min-900px)" href="big.css" type="text/css" />

    当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。

    <link rel="stylesheet" media="screen and (min-600px) and (max-900px)" href="style.css" type="text/css" />

    当屏幕在600px-900px之间时采用style.css样式来渲染web页面。 

    <link rel="stylesheet" media="screen and (max-device- 480px)" href="iphone.css" type="text/css" />

    iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率

    <link rel="stylesheet" media="not print and (max- 1200px)" href="print.css" type="text/css" />

    not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。 

    <link rel="stylesheet" media="(min- 701px) and (max- 900px)" href="medium.css" type="text/css" />

    最小宽度710px,最大宽度900px之间的引用medium.css

    兼容iphone4/4s @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){

    } 兼容iphone5 @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){

    } 兼容iphone6,iphone7,iphone8s @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){

    }

    兼容iphone6 Plus,iphone7 Plus,iphone8 Plus @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){

    } 兼容iphoneX @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){

    }

    多个网址康戳C康戳V

  • 相关阅读:
    收集珠子
    压缩变换(程序设计)
    动态规划-树上dp-1757. 搜集钻石
    动态规划-1620. 收集硬币
    动态规划-状态压缩-707. 最优账户结余
    图-1400. 图的费马点
    数学-快速幂
    计算几何-5361. 圆和矩形是否有重叠
    图-搜索-dfs-739. 24点
    图-dfs-连通分量-旋转变换-804. 不同岛屿的数量II
  • 原文地址:https://www.cnblogs.com/yyy251/p/9375809.html
Copyright © 2020-2023  润新知