移动开发—媒体查询(Media Query)
移动开发—媒体查询(Media Query)
1、使用@media,可以针对不同的媒体类型定义不同的样式
2、@media可以针对不同的屏幕尺寸设置不同的样式
3、当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
语法规范:
一、mediatype查询类型
可以将不同的设备划分成不同的类型,称为媒体类型
二、关键字语法规范
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
三、媒体特性
每种媒体类型都具有各自不同的特性,根据不同的媒体类型设置不同的展示风格,我们暂且了解三个,注意他们要加小括号
四、根据页面的宽度改变背景颜色
@media screen and (max-width:539px) {body {background-color: blue;}}@media screen and (min-width:540px) {}body {background-color: purple;}@media screen and (min-width:970px) {body {background-color: red;}
五、媒体查询+rem
- rem 是跟着HTML来的,有了rem可以根据页面元素设置不同的大小尺寸
- 媒体查询可以根据不同的设备宽度来修改样式
- 媒体查询+rem就可以实现不同的设备宽度,实现页面元素大小的动态变化
@media screen and (min-width:320px) {html {font-size: 50px;}}@media screen and (min-width:640px) {html {font-size: 100px;}}* {margin: 0;padding: 0;}.top {height: 1rem;font-style: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}</style>
</head>
<div class="top">好好学习,天天向上
</div>
六、rem 实际开发适配方案
- 按照设计稿与设备宽度的比例,动态计算并设置HTML根标签的font-size大小(媒体查询 )
- CSS中,按照设计稿的高、宽、相对值、按照同等比例换算rem为单位的值
七、rem 适配方案
rem适配方案技术使用(市场主流)
八、媒体查询—引入资源
当样式比较多的情况下,我们可以判断不同的媒体使用不同的样式表。原理,就是直接在link中判断设备的尺寸,然后应用不同的CSS文件
需求:当屏幕大于等于640px以上的,我们让div一行显示两个
当屏幕小于640px 我们让div一行显示一个
建议:媒体查询最好的方法是从小到大
移动开发—媒体查询(Media Query)相关推荐
- 媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
- 媒体查询Media Query
媒体查询(Media Query)是CSS3新语法. @media 可以针对不同的屏幕尺寸设置不同的样式. 语法规范: @media mediatype and | not | only (media ...
- html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
- 媒体查询(media)
目录 媒体查询介绍 Media Queries具体使用 一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用 四.设备屏幕的输出宽度Device Wi ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录 媒体查询介绍 Media Queries具体使用 一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用 四.设备屏幕的输出宽度Device ...
- css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
- html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
- CSS3的媒体查询@media
CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面. 语法: @media mediaType and|not|only (medi ...
- CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
最新文章
- APPlication,Session和Cookie的区别
- 他在京东每天做1000万图灵测试
- Android edittext 属性inputtype详解
- df、du、fdisk、lsblk区别
- ArcGIS Server开发教程系列(3)切片
- 服务器2003系统文件,win2003图文详解文件服务器的安装步骤
- Verilog中wire与reg类型的区别
- 36/100. Generate Parentheses
- mysql hp ux_hp ux apa 切换
- mysql获取option的value_js获取下拉列表框option中的value和text的值示例代码
- 迫切想要成功之后的喜悦感,失败太久有点心灵上小小的打击,还需要继续前进。...
- php正则表达式 w3c,正则表达式 – 匹配规则 | w3cschool菜鸟教程
- 机器人学习--移动机器人定位导航性能评估规范
- 利用sublime3 + xmapp使用服务器调试
- 盛大剥离新业务:陈大年控股
- 书摘:别做正常的傻瓜
- 数据类型的转换与运算
- HBuilderX 连接雷电模拟器
- proteus7.7+Keil2仿真80C51控制流水灯
- Symmetric and anti-symmetric BCs in FDTD and MODE