media(适配)
媒体类型
1.all 所有媒体
2.braille 盲文触觉设备
3.embossed 盲文打印机
4.print 手持设备
5.projection 打印预览
6.screen 彩屏设备
7.speech '听觉'类似的媒体类型
8.tty 不适用像素的设备
9.tv 电视
媒体特性
1.(max-width:599px)
2.(min-width:600px)
3.(orientation:portrait) 竖屏
4.(orientation:landscape) 横屏
5.(-webkit-min-device-pixel-ratio: 2) 像素比
关键字
1.and
2.not not关键字是用来排除某种制定的媒体类型
3.only only用来定某种特定的媒体类型
-很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备
01.@media all and (min-width: 600px)
02.{
03. .box
04. {
05. width:100px;
06. }
07.}
media(适配)的更多相关文章
- media适配css
/*引入适配的less*/ html { font-size: 16px; } @media only screen and (min-width: 320px) { html { font-size ...
- @media 适配兼容
/* 兼容iphone4/4s */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } /* 兼容iphon ...
- 移动web之一像素问题
一.为什么会有一像素问题 弄明白这个问题,首先要知道DPR了. DPR(device pixel ratio)pixel等于picture element.设备像素比,是默认缩放100%的情况下,即D ...
- 在移动端实现1px的边框
由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...
- 怎样通过css的media属性,适配不同分辨率的终端设备?
怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下: <!DOCTYPE html> <html> <head> <title>首页 ...
- @media响应式的屏幕适配
当页面小于960px的时候执行 @media screen and (max-width: 960px){ body{ background: #000; } } 等于960px尺寸的代码 @medi ...
- html5移动端适配- media query
iPad部分css适配 - media query 代码如下图: 注: @media要放在css最下方,防止被覆盖.
- Css3 Media Queries移动页面的样式和图片的适配问题(转)
CSS3 Media Queries 摘自:http://www.w3cplus.com/content/css3-media-queries Media Queries直译过来就是“媒体查询”,在我 ...
- 媒体查询@media 屏幕适配
@media(max-width: 1199px){.banner{height: 400px;}}1.6倍@media(min-width: 1200px) and (max-width: 1365 ...
- 手机端@media的屏幕适配
@media only screen and (width: 320px) { html { font-size: 16px; }} @media only screen and (width: 36 ...
随机推荐
- .NET基础 (11)类型的基类System.Object
类型的基类System.Object1 是否存在不继承自System.Object类型的类2 在System.Object中定义的三个比较方法有何异同3 如何重写GetHashCode方法 类型的基类 ...
- ModelSim 修改测量时间显示的单位
经常有网友问,ModelSim仿真时,测量两个点之间的时间,想显示合适的单位怎么设置,例如下图显示的两个测量光标间的时间,是以频率为单位显示的,当希望设置为以时间显示,例如ns或者ms的时候怎么办呢? ...
- 寻找最大的K个数(下)
接着昨天的写,里面的代码包含昨天的 #include <iostream> using namespace std; #define N 50 //初始化数组 , , , , , , , ...
- TestNG(一)——起步
你可以从 http://testng.org/doc/documentation-main.html 获取信息. 一.简介 TestNG是test next generation的缩写,即下一代测试技 ...
- Oracle索引技术研究
Oracle索引类型 B树索引 特定类型索引 确定索引列 主键和唯一键值列的索引 外键索引 其他合适的索引列 B树索引 B树索引算法 B树是指B-tree(Balanced Tree),B树的存在是为 ...
- c#格式化字符
1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:¥0.20 (英文操作系统结果:$0 ...
- jmeter分布式环境
搭建jmeter分布式环境 (1)确定分布式结构,即1台机器部署master.几台机器部署slave? (2)将相同版本的jmeter分别拷贝到这几台机器 (3)修改maste ...
- 基于 Raphael 的 Web UI 设计 - 初稿
基于 Raphael 的 UI 设计 - 初稿 还有很多地方需要完善,这次要把 Raphael 彻底用起来,^_^, 一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够150字呢,说说 ...
- C#之通过图片地址下载图片
因为项目上需要加载在线卫星云图,因此写了这个功能来把卫星云图下载的本地,在这里记录一下: string imageUrl=“http://image.nmc.cn/product/2018/08/06 ...
- Android Dialog 的一些特性
1. Dialog 与 AlertDialog 的区别. AlertDialog 是一种特殊形式的 Dialog.这个类中,我们可以添加一个,两个或者三个按钮,可以设置标题.所以,当我们想使用 Ale ...