媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ #logo{ display: none; } } pc端 @media (min-width: ...
分类：
其他好文 时间：
2017-03-01 20:40:36
阅读次数：
202
最近使用bootstrap做网站的时候发现，在ie8下的媒体查询一直失效： 后来解决了，做如下记录： 1、必须运行在服务器下 2、hack 条件语法，如下： 这样写有一点不足的地方是，ie9同样也加载了上述两个文档，改成[if lte ie 8] 或者 [if lt IE 8] 都不生效，不知道为什 ...
分类：
其他好文 时间：
2017-02-27 22:55:31
阅读次数：
172
媒体查询 1、媒体类型 其中media后面的那个单词是媒体类型 all所有媒体类型（默认，可以不写），screen屏幕，这两个是最常用的。 2、逻辑操作符 媒体查询的意思就是后面这个逻辑表达式为真，里面的css起作用。 中间and是逻辑操作符 and 与 都为真才真 or或逗号 有一个真就为真 no ...
分类：
Web程序 时间：
2017-02-24 12:12:22
阅读次数：
213
1 – 布局 当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个 ...
分类：
Web程序 时间：
2017-02-20 15:06:02
阅读次数：
541
媒体查询 从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。 <link rel="stylesheet" type="text/css" href="site.css" media="scr ...
分类：
Web程序 时间：
2017-02-19 13:05:02
阅读次数：
526
准备工作1：设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： 这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale： 初始的缩放比例（默认设置为1.0）minimum-scale：允许用户缩 ...
分类：
Web程序 时间：
2017-02-13 15:30:03
阅读次数：
249
1.媒体查询？ 响应式布局的方法之一，使我们的网页适配于各种设备。 2.为什么学习媒体查询？？？ 随着科技的发展，终端设备趋于多元化，尤其是手机端的兴起，具有不同尺寸和分辨率的设备。我们原先给PC端设计的网页，就是为了 让网页更好的适应屏幕的大小显示在屏幕上。 3.学习的bootstrap就是对媒体 ...
分类：
Web程序 时间：
2017-02-08 11:50:31
阅读次数：
173
html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程，利用css3 ...
分类：
Web程序 时间：
2017-02-06 14:59:57
阅读次数：
217
一、CSS实现响应式 CSS响应式的实现主要依赖于CSS媒体查询： 媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如：width，height，color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。即通过媒体 ...
分类：
Web程序 时间：
2017-02-05 21:48:54
阅读次数：
353
一.设置Meta标签 通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" content="width=device-widt ...
分类：
其他好文 时间：
2017-02-05 12:57:15
阅读次数：
156
