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 ...
随机推荐
- 如何在Windows环境下安装Linux系统虚拟机
如何在Windows环境下安装Linux系统虚拟机 本篇经验写给想要入门学习C语言的小白们.Windows系统因为使用窗口图形化,操作简单,功能多样,所以我们在Windows环境下可以做到很多,但想要 ...
- (博弈 sg入门)kiki's game -- hdu -- 2147
链接: http://acm.hdu.edu.cn/showproblem.php?pid=2147 题意: 在一个n*m的棋盘上,从 (1,m),即右上角开始向左下角走. 下棋者只能往左边(lef ...
- Ubuntu的常识使用了解2
1. 在linux系统中,所有的目录(分区)都是挂靠在/跟目录下. 使用「cd」这个指令来切換目录.切换目录的方式:(1)绝对路径,以根目录做开头/, (2)相对目录, 没有以根目录开头. 注意:插补 ...
- 层层递进Struts1(五)之处理流程
这篇博客我们深入Struts框架执行部分源码,从ActionServlet的process函数开始,看一下其内在的执行过程. 流程图 以下流程图展示的是ActionServlet和RequestPro ...
- IOC容器基本原理
1 IoC容器的概念 IoC容器就是具有依赖注入功能的容器,IoC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应用程序由IoC容器进行 ...
- Android-自定义控件-继承View与ViewGroup的初步理解
继承View需要走的流程是: 1.构造实例化, public ChildView(Context context, @Nullable AttributeSet attrs) 2.测量自身的高和宽on ...
- 使用Eclipse切换TFS工作区
这个问题首先牵涉到两个概念: - Eclipse的工作区:Eclipse的工作区是运行Eclipse时需要连接的本地代码空间,默认情况下,在Eclipse中创建的项目都保存在Eclipse的工作区中 ...
- solr-DIH:dataimport增量全量创建索引
索引创建完毕,就要考虑怎么定时的去重建, 除了写solrj,可以定时调用下面两条url进行增量或者全量创建索引 全量:http://ip:port/webapp_name/core_name/da ...
- PostgreSQL创建表及约束
创建表 语法: create table table_name ( column_name type column_constraint, table_constraint table_constra ...
- CSS鼠标手势
属性名:cursor 属性值(手势状态): auto : 默认值.浏览器根据当前情况自动确定鼠标光标类型. all-scroll : IE6.0 有上下左右四个箭头,中间有一个圆点的光标.用于 ...