css自媒体查询
准备工作1:设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释:
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
准备工作2:加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
- <![endif]-->
准备工作3:设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:
为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的:
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
不过我最近又发现了一个更给力的写法:
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
怎么这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上,不过不用也是可以的。
以上内容摘自http://blog.csdn.net/yuzhongkai/article/details/51041937
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background: red
}
@media screen and (min-width:600px) and (max-width:1200px){
body{
background: greenyellow
}
}
@media screen and (max-width:600px){
body{
background: rgb(47, 102, 255)
}
}
/* 页面宽度大于1200背景红色 1200-600绿色 小于600蓝色 */
</style>
</head>
<body>
</body>
</html>
常用的自媒体查询样式
特性名 | 值 | 应用场景 |
width min-width max-width |
显示区域的宽度(对打印机而言是打印表面) | 改变布局以适应非常窄(如手机)或非常宽的显示器。 |
height min-height max-height |
显示区域的高度 | 改变布局以适应非常长或非常短的显示器 |
device-width min-device-width max-device-width |
当前计算机或设备屏幕的宽度 (或打印输出时纸面的宽度) |
根据不同设备(如手机)调整布局 |
device-height min-device-height max-device-height |
屏幕或纸面的高度 | 根据不同设备(如手机)调整布局 |
orientation | landscape(横向)或portrait(纵向) | 根据设备的朝向调整布局 |
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio |
显示区域的宽高比(1/1是正方形) | 根据窗口形状调整样式(问题可能比较复杂) |
color min-color max-color |
屏幕颜色的位深 (1位表示黑白,目前主流显示器都是24位) |
检查是否支持彩色输出(比如是不是黑白打印), 或者支持的颜色数量 |
样式表用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="1.css"">
<link rel="stylesheet" href="2.css" media="(max-width:800px)">
</head>
<body>
<div>
<ul>
<li>1是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>2是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>3是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>4是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>5是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>6是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>7是大哥,哈哈哈哈哈哈哈哈哈!</li>
<li>8是大哥,哈哈哈哈哈哈哈哈哈!</li>
</ul>
</div>
</body>
</html>
1.css
body{
margin:;
width: 100%;
}
div{
text-align: center;
margin: auto
}
ul{
display: flex;
list-style: none;
justify-content: center;
flex-wrap:nowrap
}
li{
line-height: 30px;
background: red;
width: 300px;
margin: 20px;
font-size: 30px
}
2.css
body{
margin:;
width: 100%;
}
div{
text-align: center;
margin: auto
}
ul{
display: flex;
list-style: none;
justify-content: center;
flex-wrap:wrap
}
li{
line-height: 30px;
background: rgb(25, 0, 255);
width: 300px;
margin: 20px;
font-size: 10px
}
css自媒体查询的更多相关文章
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- 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:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
随机推荐
- crontab 定期拉取代码
* * * * * cd /home/wwwroot/default/lion/ && /usr/bin/git pull origin 5hao >> /tmp/git. ...
- Android 一些系统参数的获取
//获取网络类型 2G/3G/WIFI public String getNetworkType(){ String mNetWorkType = ""; Connectivity ...
- java 面向对象编程(OOP)
java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改: 代码复用: 增加代码的可靠性和灵活性: 增加代码的可理解性. 封装 封装 ...
- 查看自己电脑外网IP
连着wifi,在CMD窗口中显示的无线局域网适配器IP很有可能是内网IP.此时可以通过下面方法查看自己的电脑外网IP. 1.前提条件可以上外网: 2.上外网百度,输入IP,进行搜索. 3.查看结果即可 ...
- asp:DropDownList与asp:DataList的联合使用
情况:当在asp:DropDownLis点击选取其中的一个值来响应datalist的值. <form id="form1" runat="server"& ...
- 通过eclipse mybatis generater代码生成插件自动生成代码
Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由于手动书写很容易出错,我们可以利用Mybatis-Generator来帮我们自动生成文件.通过在Ecl ...
- UVA 1363 Joseph's Problem
https://vjudge.net/problem/UVA-1363 n 题意:求 Σ k%i i=1 除法分块 如果 k/i==k/(i+1)=p 那么 k%(i+1)=k-(i+1)*p= k ...
- 51Nod 1083 矩阵取数问题 | 动态规划
#include "bits/stdc++.h" using namespace std; #define LL long long #define INF 0x3f3f3f3f3 ...
- Makefile $@,$^,$ 作用
/* main.c */ #include "mytool1.h" #include "mytool2.h" int ...
- Linux局域网内文件传送
先安装ssh服务 sudo apt-get install ssh 普通传输文件,可以使用scp命令 1.将本地文件复制到目标机器: scp 文件名 用户名@目标机器IP:目标机器路径 回车后输入密 ...