常用响应式

发布时间:2019年09月30日 阅读:10 次

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" />电脑宽屏






Tag:
相关文章

发表评论: