CSS-18-媒体查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 1200px;
height: 100px;
background-color: #87CEEB;
}
/*当浏览器窗口小于960时*/
@media only screen and (min-width: 641px) and (max-width: 960px) {
div{
width: 100%;
background-color: yellow;
}
}
/*当浏览器窗口小于640时*/
@media only screen and (max-width: 640px) {
div{
width: 100%;
background-color: #9ACD32;
}
}
/*当浏览器窗口大于等于960时*/
@media only screen and (min-width: 961px) {
div{
width: 100%;
background-color: #87CEEB;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS-18-媒体查询的更多相关文章
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- CSS Media媒体查询使用大全，完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- css自媒体查询
准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <meta name="viewport" content=& ...
- CSS：使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- CSS 媒体查询 响应式
媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...
- css媒体查询aspect-ratio宽高比在less中的使用
css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...
- 轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
随机推荐
- F5 LTM旁路配置四层负载
网络拓扑图如下: 如上图所示,其中LTM和web1,web2处于同一网络中,外部的client访问请求后端的服务的时候,通过F5 LTM的VS地址,将实际的请求分配到后端两台服务web1和web2上 ...
- Eclipse 代码快捷键模板（一）
话不多说,自行google. 设置快捷键,打开eclipse,依次打开:Window -> Preferences -> General -> Key. 设置代码快捷键,打卡ecli ...
- HashMap、lru、散列表
HashMap HashMap的数据结构:HashMap实际上是一个数组和链表("链表散列")的数据结构.底层就是一个数组结构,数组中的每一项又是一个链表. hashCode是一个 ...
- ubuntu手动升级系统
之前自己安装的是ubuntu14.04,现在需要升级到16.04,于是上网搜索了一下升级步骤以及相关命令,将这些整理出来分享给大家,希望能够给大家提供帮助. 1.更新资源: sudo apt-get ...
- Spring应用事件（Application Event）
Spring的事件为Bean与Bean的消息通信提供的支持.当一个Bean处理完了一个任务以后,希望另一个Bean知道并能做出相应的处理,这是我们就需要让另一个Bean监听当前Bean所发送的事件. ...
- 负载均衡基本原理与lvs
前言: 之前在山西的项目上使用的是lvs下的NAT模式,但另外两个模式并没有涉及,今天系统的整理下关于负载均衡的相关理论与lvs各模式的相关优点与不足,知其然与所以然,而后能针对性的应用: 基本介绍 ...
- （httpd、php）
(一)http协议介绍 http: 超文本传输协议,http协议是应用层协议,实现http协议的软件都监听的TCP的80端口之上.http协议也是一种文本协议,是基于TCP协议实现 http协议有几个 ...
- hadoop传递参数方法总结
转自:http://blog.csdn.net/xichenguan/article/details/22162813 写MapReduce程序通常要传递各种各样的参数,选择合适的方式来传递参数既能提 ...
- nodeJS实现识别验证码（tesseract-ocr+GraphicsMagick）
背景 最近在写一个爬虫的小工具,卡在登录这里. 想爬的网站需要登录才能获取数据,登录又需要输入验证码. 好在验证码是简单的验证码,还可以自己识别试试. 需求分析 1.保存验证码图片 2.识别验证码 3 ...
- PHP 对接 饿了么开放平台 接单
<?php # 一开始使用的是API方式对接,所以我这里是API的方式+SDK的结合 (除了获取token之外都是使用SDK方式,所以看到的朋友还是直接使用纯SDK方式对接最好),因为我这里使用 ...