1.媒体查询：@media only screen and (max-width: ) {},在最初做pc端时，使用各种媒体查询，因为pc的屏幕分辨率总共就几种，不嫌麻烦的重复使用类名。有很大的缺陷就是UI给的设计稿宽度是一定的，在做响应式式凭借自己的感觉是一种超级不爽的美感纠结症。 2.百分比：百 ...
分类：
移动开发 时间：
2017-06-21 09:37:25
阅读次数：
320
所谓响应式布局，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。他的好处我们不用写多套屏幕模板而只需要写一个就可以实现，现在用的比较多的就是bootstrap的响应式布局，而他实现的原理就是，他会为一个元素设置多个类，然后通过媒体查询会根据当前屏幕分辨率来选择适合的类进行渲染。 b ...
分类：
其他好文 时间：
2017-06-20 18:05:58
阅读次数：
119
.col-md-4 .col-md-4 .col-md-offset-4 .col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offs ...
分类：
其他好文 时间：
2017-06-18 20:52:59
阅读次数：
152
(0)写在前面 讲述知乎上看到的一篇文章中的一个案例，让我脑洞大开，佩服至极，特意第二天找到原文赞赏了 5元，原文地址https://zhuanlan.zhihu.com/p/27258076，案例用了很多css3的属性。(1)效果演示 (2)知识点及效果 上述为简易代码 display: flex ...
分类：
Web程序 时间：
2017-06-13 22:46:21
阅读次数：
362
1媒体查询概念 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如 宽度，高度和颜色。在CSS3中添加的媒体查询，允许内容的呈现针对一个特定范围的输出设备而定制，而不必改变内容本身。 2媒体查询的两种引入方式 3逻辑操作符 可以使用 not，and 和 onl ...
分类：
Web程序 时间：
2017-06-13 17:25:24
阅读次数：
308
最近在工作中遇到一些让人头疼的问题——多媒体查询，也就是大家所说的响应式布局（多终端适配）。在实际的开发过程中，响应式的设计使得多终端的适配变得非常方便，响应式展现的方式，更有一种组装变形金刚的感觉，但也在实际工作中发现了许多问题： 一、开发思维变得复杂 在我们开发页面的时候，思维无法专注于单一的P ...
分类：
其他好文 时间：
2017-06-13 12:54:39
阅读次数：
288
原文链接：http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案：· 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem淘 ...
分类：
移动开发 时间：
2017-06-12 17:11:44
阅读次数：
1232
已经学习css3一个月了，通过对css3的深入学习，我对网页设计的理解就更深刻了，以前只会用简单的图片，定位等来制作网页，现在可以运用css3扩展的新内容来写出更好看的网页。 css3扩展内容中，我认为好用的有：动画，选择器，用户界面，多列布局等，运用这些可以使用户界面变得更加美观。在我看来媒体查询 ...
分类：
Web程序 时间：
2017-06-09 23:45:39
阅读次数：
228
项目中要实现打印特定的文章，所以要隐藏一些元素，当时是用js实现的隐藏，忘记了css3就有这么个媒体查询。 只需要指定@media print{}就可以指定打印出来的样式。 另外，因为是css3的内容，因此IE9+才支持。 ...
分类：
其他好文 时间：
2017-06-08 22:29:22
阅读次数：
366
【媒体类型 & 媒体查询】 @media 规则允许在相同样式表为不同媒体设置不同的样式。 在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体： 如果文档宽度小于 300 像 ...
分类：
其他好文 时间：
2017-05-31 14:26:27
阅读次数：
279
