PC优先或手机优先的CSS基本结构

最新推荐文章于 2023-09-13 20:22:08 发布

chelen_jak

最新推荐文章于 2023-09-13 20:22:08 发布

阅读量398

点赞数

分类专栏：实用 CSS Angular2 Ionic3

本文链接：https://blog.csdn.net/chelen_jak/article/details/83784712

版权

实用同时被 3 个专栏收录

738 篇文章 4 订阅

订阅专栏

CSS

191 篇文章 0 订阅

订阅专栏

Ionic3

175 篇文章 1 订阅

订阅专栏

参考：《css实战手册》 p458~459
延伸阅读：【译】怎样编写移动优先的CSS (推荐移动优先，必读）

电脑优先

/*电脑优先*/

/*把重置样式放在这里*/

/*把针对桌面设备和所有设备的基础样式放在这里*/
body{
    /* body 标签的属性 */
}

/* 针对中型屏幕 */
@media (min-width: 481px) and (max-width: 768px){
    body {
        /* 只适用于平板电脑的属性 */
    }
}

/* 针对小屏设备 */
@media (max-width: 480px) {
    body {
        /* 只适用于手机的属性 */
    }
}

移动设备优先

/*移动设备优先*/

/*把重置样式放在这里*/

/*把针对移动设备和所有设备的基础样式放在这里*/
body {
    /* body 标签的属性 */
}

/* 针对中型屏幕 */
@media (min-width: 481px) and (max-width: 768px) {
    body {
        /* 只适用于平板电脑的属性 */
    }
}

/* 针对大屏设备 */
@media (min-width: 769px) {
    body {
        /* 只适用于桌面浏览器的属性 */
    }
}