30
2019
09

常用响应式

1、meta 声明

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


2、常用媒体查询

@media screen and (min-width:480px)

@media screen and (min-width:768px)

@media screen and (min-width:992px)

@media screen and (min-width:1200px)


注:注意顺序


3、demo

    <link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" /> 手机版
    <link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" /> 平板
    <link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" />电脑
    <link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" />电脑宽屏






« 上一篇 下一篇 »