@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
} .gridmain {
width:100%;
} .gridright {
width:100%;
}
}

这段代码的意思是:当文档的宽度小于500px的时候,执行大括号里面的css代码

CSS媒体查询(@media)的更多相关文章

  1. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  2. CSS 媒体查询@media

    1. 概述 1.1 定义 @media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式,在响应式页面中,@media非常有用.重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. 1. ...

  3. 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

  4. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  5. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  6. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  7. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  8. 详解css媒体查询

    简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的 ...

  9. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

随机推荐

  1. 循环列表的Java实现,解决约瑟夫环问题

    import java.util.Scanner; /** * 循环列表的Java实现,解决约瑟夫环问题 * * @author LIU * */ public class LinkedList { ...

  2. OGRE 2.1 Windows 编译

    版权所有,转载请注明链接 OGRE 2.1 Windows 编译 环境: Windows 7 64Bit Visual Studio 2012 OGRE 2.1 CMake 2.8.12.1 OGRE ...

  3. Linux上的free命令学习

    Linux新手,今天使用了free命令来查看电脑内存的使用情况.如下:-m表示以M来显示. 1.基本信息介绍 (1)其中纵向信息: Mem:表示物理内存大小 -/+ buffers/cached:表示 ...

  4. C++ struct 定义及初始化

    1 定义: struct Book{ unsigned int bookNo; string name; }; 2 初始化 struct的初始化分为三种:逐一赋值,顺序赋值,乱序赋值 //    逐一 ...

  5. Log4J 使用实战

    前言: 日志在开发和服务中扮演重要的角色, 有人用来追查/分析问题, 有人通过日志, 来记录重要的信息. 日志是数据分析和统计最重要的数据来源. 在Java领域, Log4j日志框架成为java开发人 ...

  6. C# 托管资源和非托管资源

    托管资源指的是.NET可以自动进行回收的资源,主要是指托管堆上分配的内存资源.托管资源的回收工作是不需要人工干预的,有.NET运行库在合适调用垃圾回收器进行回收. 非托管资源指的是.NET不知道如何回 ...

  7. 设置webconfig 解决asp.net上传文件过大问题

    对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大小. <httpRuntime executionTimeout="800" maxRequ ...

  8. UVa 814邮件传输代理的交互

    好吧,终于知道原来string有这么多用法,map可以通过vector来映射多个数 #include <iostream> #include <string> #include ...

  9. 控制文本和外观------CSS Binding(CSS类名绑定)

    <style> .myColor{color:red;font-size:13px} .yourColor{color:green;font-size:34px}</style> ...

  10. mave之:java的web项目必须要的三个jar的pom形式

    jsp-api javax.servlet-api jstl <!-- jsp --> <dependency> <groupId>javax.servlet< ...