美文网首页
高级8-媒体查询,栅格系统

高级8-媒体查询,栅格系统

作者: 24_Magic | 来源:发表于2017-05-12 14:27 被阅读39次

1.用媒体查询实现如下要求

  1. 在页面宽度> 1200px 时页面背景为红色
@media screen and (min-width: 1200px) not (width: 1200px){
  body {
    background-color: #f00;
  }
}
  1. 在页面1200px>=宽度> 900px 时页面背景为绿色
@media screen and (max-width: 1200px) and (min-width: 900px) not (width: 900px){
  body {
    background-color: #0f0;
  }
}
  1. 在页面900px>=宽度> 600px 时页面背景为黄色
@media screen and (max-width: 900px) and (min-width: 600px) not (width: 600px){
  body {
    background-color: yellow;
  }
}
  1. 宽度<=600px 背景为灰色
@media screen and (max-width: 600px) {
  body {
    background-color: grey;
  }
}

栅格系统主要通过在窗口不同宽度下控制元素的比例不一形成布局效果
栅格系统代码

点击展示效果,拖动窗口试试

flex布局非常方便,很简单就可以实现我们需要的元素布局效果,而且还会根据窗口来自适应布局效果
flex布局代码

点击展示效果,拖动窗口试试

相关文章

  • 高级8-媒体查询-栅格系统

    题目1: 用媒体查询实现如下要求 在页面宽度> 1200px 时页面背景为红色 在页面1200px>=宽度> 90...

  • 高级8-媒体查询,栅格系统

    1.用媒体查询实现如下要求 在页面宽度> 1200px 时页面背景为红色 在页面1200px>=宽度> 900px...

  • 高级任务8-媒体查询_flex布局_栅格系统

    用媒体查询实现如下要求 在页面宽度> 1200px 时页面背景为红色 在页面1200px>=宽度> 900px ...

  • 媒体查询_栅格系统

    Media Queries 自适应阶段 自从有了不同屏幕的尺寸,我们就开始尝试自适应了 居中 虽然不能让所有屏幕都...

  • 媒体查询-栅格系统

    1: 用媒体查询实现如下要求 在页面宽度> 1200px 时页面背景为红色 在页面1200px>=宽度> 900p...

  • 媒体查询-栅格系统

    在页面宽度> 1200px 时页面背景为红色 在页面1200px>=宽度> 900px 时页面背景为绿色 在页面...

  • 媒体查询、栅格系统

    1.用媒体查询实现如下要求 效果展示 2.实现一个简单的栅格系统效果展示 3.栅格系统bootstrap的核心就是...

  • bootstrap3 媒体查询 栅格参数

    媒体查询在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。 ...

  • 媒体查询_删格系统

    用媒体查询实现如下要求 代码预览 实现一个简单的栅格系统 代码预览

  • 响应式布局

    栅格系统 栅格系统的基础就是媒体查询和浮动布局 px px像素,是绝对长度单位的一种,它的大小是根据用户屏幕显示器...

网友评论

      本文标题:高级8-媒体查询,栅格系统

      本文链接:https://www.haomeiwen.com/subject/ogcqtxtx.html