CSS 媒体查询@media
1. 概述
1.1 定义
@media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式,在响应式页面中,@media非常有用。重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
1.2 使用
css语法:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
媒体类型(mediatype):
- all —— 所有设备
- screen —— 用于电脑屏幕,平板电脑,智能手机等。
- print —— 用于打印机和打印预览。
- speech —— 应用于屏幕阅读器等发声设备
媒体功能(media feature)[常用]:
- max-width —— 定义输出设备中的页面最大可见区域宽度
- min-width —— 定义输出设备中的页面最小可见区域宽度。
- max-height —— 定义输出设备中的页面最大可见区域高度。
- min-height —— 定义输出设备中的页面最小可见区域高度。
- orientation —— 定义输出设备中的页面可见区域高度是否大于或等于宽度。
有两个值 landscape(横屏) | portrait(竖屏),portrait:指定输出设备中的页面可见区域高度大于或等于宽度;landscape:除portrait值情况外,都是landscape。
针对不同的媒体使用不同样式(stylesheets):
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
1.3 实例
如果文档宽度小于400像素,则设置html跟节点fontsize为30px,页面中的尺寸可使用rem进行处理。
@media screen and (max-width: 400px) {
html{
font-size: 30px;
}
}
2. 媒体查询尺寸
说明:项目常用:
- min-width: 1200px —— 电脑
- max-width: 1100px —— iPad Pro
- max-width: 990px —— iPad
- max-width: 760px —— 手机
@media screen and (min-width: 1200px) {
html {
font-size: 100px;
}
}
@media screen and (max-width: 1100px) {
html {
font-size: 100px;
}
}
@media screen and (max-width: 990px) {
html {
font-size: 80px;
}
}
@media screen and (max-width: 760px) {
html{
font-size: 30px;
}
}
CSS 媒体查询@media的更多相关文章
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- CSS媒体查询(@media)
@media only screen and (max-width: 500px) { .gridmenu { width:100%; } .gridmain { width:100%; } .gri ...
- 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)
什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- CSS3 之媒体查询Media Query
Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...
- 详解css媒体查询
简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的 ...
- CSS 媒体查询 响应式
媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...
随机推荐
- 【python小练】0001
第 0001 题:做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用 Python 如何生成 200 个激活码(或者优惠券)? # coding ...
- Kali Linux之web安全扫描器skipfish使用
0x00.skipfish简介 谷歌公司出品的开源web程序评估软件. skipfish特点:CPU资源占用低,扫描速度快,每秒可以轻松处理2000个请求,误报率低. 1x00.skipfish使用 ...
- v-module绑定vuex里面的数据
当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会比较棘手: <input v-model="obj.message"> ...
- python之读写文件
1. 读取文件数据,文件必须存在才可以读且如要读取的文件不和当前.py在同一个包下,需要特别指定此文件路径才行 f=open('test.txt',encoding='utf-8')#填写文件路径,打 ...
- ES6 基础
转载自:ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来 ...
- 关于tcp queue
半连接队列:服务端维护的与客户端保持SYN_RECV状态的连接队列,等待客户端回复,当收到客户端ack后,如果条件允许(全连接队列未达到最大值),服务端进入ESTAB状态,从半连接队列移到全连接队列的 ...
- EL表达式 EL函数 自定义el函数 《黑马程序员_超全面的JavaWeb视频教程vedio》
\JavaWeb视频教程_day12_自定义标签JSTL标签库,java web之设计模式\day12_avi\12.EL入门.avi; EL表达式 1. EL是JSP内置的表达式语言! * jsp2 ...
- Delphi线程定时器TThreadedTimer及用法--还有TThreadList用法可以locklist
Delphi线程定时器 - -人生如歌- - 博客园http://www.cnblogs.com/zhengwei0113/p/4192010.html (* 自己编写的线程计时器,没有采用消息机制, ...
- linux 权限管理
- Eclipse使用solrJ 7.7.0连接solr步骤
先写一个测试类: package com.taotao.rest.solrj; import org.apache.solr.client.solrj.SolrClient; import org.a ...