请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 10288|回复: 1

Bootstrap 响应式设计

[复制链接]
  • TA的每日心情
    开心
    2019-5-30 08:42
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    506

    主题

    511

    帖子

    2358

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    2358
    admin实名认证 发表于 2019-3-11 13:55:50 | 显示全部楼层 |阅读模式
    我们在引入bootstrap设计响应式网站的时候,会在审查元素的CSS样式中查看到如下格式:
    1. @media (min-width: 1200px)
    2. grid.less:7
    3. .container {
    4.     width: 1170px;
    5. }
    6. @media (min-width: 992px)
    7. grid.less:85
    8. .container {
    9.     width: 970px;
    10. }
    11. @media (min-width: 768px)
    12. grid.less:85
    13. .container {
    14.     width: 750px;
    15. }
    复制代码


    “@media”格式书写了针对不同设备宽度展示的不同样式,例如第一种@media(min-width:1200px)表明了在此下面写的css样式需要在设备屏幕宽度大于1200像素的时候才展示。



    一般有以下的几种:
    1. 第一个区域以 '@media (max-width: 480px)' 开始,为最大宽度为 480 像素的设备设置样式。

    2. 第二个区域以 '@media (max-width: 767px)' 开始,为最大宽度为 767像素的设备设置样式。

    3. 第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始,为最小宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

    4. 下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。

    5. 最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始,前一个是为最小宽度为 980 像素的设备设置样式,后一个是为最小宽度为 1200 像素的设备设置样式。
    复制代码
    所以,这样样式表的基本作用就是,通过使用 'min-width' 和 'max-width' 属性,来根据设备的最大宽度和最小宽度决定使用的样式。
    maomivip@mail.com
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    280

    积分

    注册会员

    Rank: 2

    积分
    280
    EyeHag 发表于 2019-5-23 05:47:48 | 显示全部楼层
    不错不错,谢谢分享
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|赢创志诚服务网 ( 鲁ICP备19000917号 )

    GMT+8, 2019-9-22 03:41 , Processed in 0.056796 second(s), 29 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表