css3 媒体查询的学习。
1、什么是媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
2、为什么响应式设计需要,媒体查询
如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式
3、如何在CSS文件中引入媒体查询
媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式
4、怎样使用media
一、
首先需要在html文档中添加以下代码,用来兼容移动设备的显示效果
<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
ps:
width=device-width:宽度等于当前设备的宽度
initial-scale=1:初始的缩放比例(默认为1)
maximum-scale=1:允许用户缩放到得最大比例(默认为1)
user-scalable=no:用户不能手动缩放
二、怎样在CSS文件中写CSS响应式媒体查询
例:
@media screen and (max-width:720px) and (min-width:320px){
body{
}
@media screen and (max-width:320px){
body{
}
}
ps:该段媒体查询的意思是:当设备屏幕宽度在320px——720px之间时,媒体查询中body的背景色()会重叠之前的body背景色,当设备屏幕宽度在320px以下时,媒体查询中body的body背景色(background-color:blue;)会重叠之前的body背景色
这段代码来让IE的文档模式永远都是最新的: <meta ;http-equiv="X-UA-Compatible" content="IE=edge"> 更牛逼的!:<meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
css3 媒体查询的学习。的更多相关文章
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
- iPhone6的CSS3媒体查询
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- CSS3媒体查询
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- CSS3媒体查询总结
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- Html5 @media + css3 媒体查询
css3 media媒体查询器用法总结 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
随机推荐
- 斗鱼扩展--notifications提示(十二)
来说下 桌面通知 Notification,HTML5支持 Web Notifications 的实例,但是要经过用户允许, chrome://settings/content/notificati ...
- SQL Server和ASP.NET的操作基本操作
ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlCommand对象,负责SQL语句的执行和存储过程的调用: 第三 ...
- MS .NET企业级应用架构设计笔记1(关于业务层)
本文针对<MS .NET企业级应用架构设计>业务层前半部分做了相关笔记并记录了自己的一点想法.对于后半部分的具体模式将在第二次笔记中体现. 关于Layer与Tier Layer一般用来 ...
- 在mac上使用github for mac 创建并上传项目
1.下载github for mac https://mac.github.com/ 2.登陆 偏好设置 3.用Xcode 创建一个项目,勾上“create local git respository ...
- Vue.js - Day3
定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...
- Python列表边遍历边修改问题解决方案:alist[:]
最近在看python,遇到个简单的问题:删除列表中指定的重复元素,发现一些实用并且有趣的东西. 1.错误示范 alist = [1,1,2,2,3,3,2,2,1,1] for i in alist: ...
- canvas制作倒计时效果
- 数据批量删除_从页面js到后台数据库
LayUI 批量选择的 ,然后操作 batchdel: function () { var checkStatus = table.checkStatus('LAY-gridview') , ch ...
- springboot/springmvc转换器
常用的转换器 String转Date转换器(用于接受日期参数自动转换成Date类型便于后台数据处理) /** * 全局handler前日期统一处理 * @author zhanghang * @dat ...
- graphql 数据增删改查分页及关联操作(三)
说明: 接第二篇文章,代码也是在第二篇文章之上 本文只是针对mondodb来操作 一.添加相关的包 yarn add Mongoose 二.初始化Mongodb 修改server.ts 导入 impo ...