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:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
随机推荐
- 开发API整理（转）
附送一个 android 源码 查看地址 http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android ...
- python类型常用整理
# 一.数字 # int(..) # 二.字符串 # replace find join strip startswith split upper lower format # tempalte = ...
- python中交换两个变量值的方法
a = 4b = 5 #第1种c = 0c = aa = bb = c #第2种a = a+bb = a-ba = a-b #第3种a,b = b,a print("a=%d,b=%d&qu ...
- c++ 知道旋转前后矩阵向量值 求旋转矩阵c++/c#代码 知道两个向量求他们的旋转矩阵
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12115244.html 知道旋转前后矩阵向量值 如何去求旋转矩阵R 的c++/c#代码??? ...
- JMM中的Happens-Before原则
在java内存模型中,happens-before应该理解为:前一个操作的结果,可以被后续的操作获取,即内存可见性. 为了解决多线程的内存可见性问题,就提出了happens-before原则, ...
- 开发板免费领！腾讯云IoT应用创新大赛正式启动！
大赛简介 腾讯云IoT应用创新大赛是腾讯云面向物联网领域举办的大型竞赛,通过腾讯云IoT全链路产品能力,开放平台和服务,与广大开发者共同创新,孵化优秀的IoT产品和解决方案,共同构建IoT应用生态. ...
- Tangram: Optimized Coarse-Grained Dataflow for Scalable NN Accelerators 阅读笔记
目录 Tangram: Optimized Coarse-Grained Dataflow for Scalable NN Accelerators 1.Abstract 2.Introduction ...
- centos下MySQL登录1045问题解决
由于需要在centos下部署整个应用,自然少不了对数据库的操作.但很多人可能会遇到一些问题,比如创建用户成功,但是却无法登录. 无法登陆一般就两个原因.第一,远程访问端口没开,第二个原因就是密码错误了 ...
- 1059 C语言竞赛 (20 分)C语言
C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份"神秘大奖"(比如很巨大的一本学生研究论文集--). 1 ...
- 使用vue-baidu-map解析geojson
这是后台给我的gejson: {"type":"FeatureCollection","features":[{"type&quo ...