移动设备&Media Queries,适应移动设备大小
来源:互联网 发布:java sql注入原理 编辑:程序博客网 时间:2024/06/05 22:34
viewport设置适应移动设备屏幕大小
- 为了解决移动版的屏幕分辨率大小,专门定义了虚拟窗口,并自定义窗口的大小或缩放功能
-Android Browser浏览器的默认值事800像素; - IE浏览器的默认值是974像素
- Opera浏览器的默认值是850像素
- viewport的用法
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0/>//主要作用是自定义虚拟窗口,并指定虚拟窗口width宽度为device-width,初始缩放比例大小1倍,同时不允许用户使用手动缩放功能
- width:指定虚拟窗口的屏幕大小
- height:指定虚拟窗口的屏幕高度大小
- initial-scale指定初始缩放比例
- minimum-scale指定允许用户缩放的最小比例
- maximum-scale指定允许用户缩放的最小比例
- user-scalable指定是否允许手动缩放
Media Queries
要实现这个模块,需要在head标签内导入一个css样式文件,下面的定义当前屏幕可视区域的宽度最大值为600像素时要用的
<link rel="stylesheet" media="screen and(max-width:600ox)" href="small.css" />//下面时在css文件中要写的内容 @media screen and(max-width:600px){ .dema{ background-color:#ccc; } }
- 下面的定义当前屏幕可视区域的宽度在600-900像素时要用的
<link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900ox)" href="small.css" /> //下面时在css文件中要写的内容 @media screen and(min-width:600px) and(max-width:900px){ .dema{ background-color:#ccc; } }
当手机处于横向,纵向的时候
//纵向<link rel="stylesheet" media="all and(orientation:portrait)" href="porttrait.css" />//横向<link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css" />
Media Queries语法总结
@media[media_query] media_type and media_feature/*使用这个模块的时候必须@media方式开头 media_query 表示查询关键字,在这里可以使用not关键字和only关键字,not关键字表示对后面的样式表达式执行取反的操作*/
media_type允许定义的10种设备类型
阅读全文
0 0
- 移动设备&Media Queries,适应移动设备大小
- Media Queries移动设备样式
- 常用主流移动设备CSS3 Media Queries整理
- 《HTML5移动开发指南》——笔记7(Media Queries 移动设备样式)
- 移动设备上的媒体查询 CSS media queries for mobile device
- @media screen 针对不同移动设备
- @media screen 针对不同移动设备
- @media解决前端移动设备不兼容问题
- @media only screen 移动端设备查询判断
- @media screen针对不同移动设备-响应式设计
- 定义css设备类型-Media Queries
- UE4 移动设备摄像机移动
- 移动设备交互设计
- 移动设备监控软件
- 移动设备流量剧增
- 移动设备阅读体验
- 移动设备阅读体验
- 移动设备分辨率一览表
- js写了一个关于时间的定时器setinterval
- JS实现定时弹出广告(BOM)
- Djnago(五)--数据库模型Models
- 关于word文档受保护的问题,不能编辑,转成能编辑的文档
- 图片加载
- 移动设备&Media Queries,适应移动设备大小
- Unity 复习要点
- php--xdebug设置 ---phpstorm 断点调试
- ubuntu细节集锦
- 作业 | 什么是RUP?
- 二维数组返回值的问题
- Java300StudyNote(3)-Java动态编译(DynamicCompile)、动态运行、反射调用mian方法、JavaCompiler.run()空指针问题
- vue2.0父子组件及非父子组件通信
- iOS程序启动->dyld加载->runtime初始化(初识)