好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>>
好程序员web前端技术分享媒体查询
什么是媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
1、媒体查询操作方式
实际操作为:对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用,如果表达式结果为假,媒体查询内的CSS将被忽略。
2、媒体查询结构
@media all and (min-width:320px) {
body { background-color:blue;}
}
设备类型(默认为all)
screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
(min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。
默认样式 注意:默认样式要写在最前面/* 打印样式 */@media print {}
/* 手机等小屏幕手持设备 */ @media screen and (min-width: 320px) and (max-width: 480px) {}
/* 平板之类的宽度 1024 以下设备 */ @media only screen and (min-width: 321px) and (max-width: 1024px) {}
/* PC客户端或大屏幕设备: 1028px 至更大*/ @media only screen and (min-width: 1029px) {}
/* 竖屏 */@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
/* 横屏 */@media screen and (orientation:landscape){对应样式}
3、CSS2 Media用法
其实并不是只有CSS3才支持Media的用法,早在CSS2开始就已经支持Media,具体用法,就是在HTML页面的heaad标签中插入如下的一段代码
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
想知道现在的移动设备是不是纵向放置的显示屏,可以这样写:
<link rel=“stylesheet” type=“text/css” media=“screen and (orientation:portrait)” href="style.css">
第一段的代码也用CSS2来实现,让它一样可以让页面宽度小于960的执行指定的样式文件:
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
4、常涉及到的css属性
display; width; float; text-align; font
转载于:https://my.oschina.net/530504/blog/3046559
好程序员web前端技术分享媒体查询相关推荐
- vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
- 好程序员web前端培训分享做H5页面需要学什么
好程序员web前端培训分享做H5页面需要学什么,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过h5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做 ...
- 好程序员web前端教程分享网页设计需要学那些东西?
好程序员web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老 ...
- 好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
- 好程序员web前端教程分享JavaScript验证API
好程序员web前端教程分享JavaScript验证API,小编每天会分享一下干货给大家.那么今天说道的就是web前端培训课程中的章节. JavaScript验证API 约束验证DOM方法 Proper ...
- 好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
- js怎么定义combobox_好程序员web前端教程分享新手应该怎么学习webpack
好程序员web前端教程分享新手应该怎么学习webpack,什么是webpack?一句话概括:webpack是一个模块打包工具(module bundler).重点在于两个关键词"模块&quo ...
- 好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
- 好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
最新文章
- Android中开发需要的高效助推的命令总结
- 【EventBus】EventBus 源码解析 ( 注册订阅者总结 | EventBus 注册订阅者流程梳理 )
- tomcat访问软链接资源
- 基于EasyNVR二次开发实现业务需求:直接集成EasyNVR播放页面到自身项目
- Radical and array
- python基础(part15)--迭代
- 亚马逊 各国站点 链接_使用Amazon S3和HTTPS的简单站点托管
- 老板眼中理想的“数据中台”,是不是真的存在?
- git遇到的问题 .Git: There is no tracking information for the current branch.
- 1.4. network
- 【转】HEIF图片存储格式探秘
- xv6 Traps, interrupts, and drivers
- wd移动硬盘测试软件,西数硬盘修复工具(WD HDD Repair Tools)
- day16正则表达式作业
- 网页设计图片向上浮动_网页设计与制作(网页设计、制作与美化)
- 斐波那契数列c语言程序改错题,C语言习题004:斐波那契数列
- django外键-left join
- 码工成长手册:刚毕业的程序员如何快速提升自己?
- Linux安装mysql没有my.cnf文件
- addEventlistener()方法,事件监听