（一）响应式图片： 在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。 注 ...
分类：
其他好文 时间：
2017-06-26 17:09:07
阅读次数：
285
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动 ...
分类：
其他好文 时间：
2017-06-22 20:53:45
阅读次数：
211
响应式布局实现的几种方法 — 弹性布局 响应式布局的实现是前端工程中一个非常大的跨越，它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力。就今天这个机会，我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局。 弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布 ...
分类：
其他好文 时间：
2017-06-22 16:52:17
阅读次数：
144
以设计稿为准，假设设计稿竖屏宽度为750px，取根元素的font-size为50px 在iphone6(375px)下，deviceWidth=7.5rem, 这个就是viewPort中的deviceWidth， 所以fontsize计算公式为 font-size=deviceWidth/7.5 即 ...
分类：
Web程序 时间：
2017-06-22 10:12:39
阅读次数：
154
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
step2 从模糊到清晰 预先定义一张品质较差的图片，之后再通过懒加载展示品质高且清晰的图片。 step3 响应式图片 在开发过程中，项目需要用到响应式布局，在移动端的情况下，我们不需要用到太过清晰的图片，以免造成用户流量的损失。 ...
分类：
Web程序 时间：
2017-06-16 14:23:13
阅读次数：
454
最近在工作中遇到一些让人头疼的问题——多媒体查询，也就是大家所说的响应式布局（多终端适配）。在实际的开发过程中，响应式的设计使得多终端的适配变得非常方便，响应式展现的方式，更有一种组装变形金刚的感觉，但也在实际工作中发现了许多问题： 一、开发思维变得复杂 在我们开发页面的时候，思维无法专注于单一的P ...
分类：
其他好文 时间：
2017-06-13 12:54:39
阅读次数：
288
bootstrap的插件全部依赖于jQuery，Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，可以直接使用Bootstrap 提供的css样式表，bootstrap最新版本发展到4.0.0版本，它对应web布局非常实用，不需要像 ...
分类：
其他好文 时间：
2017-06-11 15:38:00
阅读次数：
105
在css中单位长度用的最多的是px、em、rem，这三个的区别是：1.px是固定的像素，一旦设置了就无法因为适应页面大小而改变。2.em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根 ...
分类：
Web程序 时间：
2017-06-11 00:59:25
阅读次数：
351
