响应式设计 弹性盒模型、百分比宽高、媒体查询 适用什么?对于重内容的网站,例如形象展示,则比较适合使用响应式web设计 不适用什么?对于重功能的网站,如电子商务,门户类,则更推荐使用独立移动网站原因:功能多,页面复杂, 页面体积变大,消耗流量,不如直接做一个轻量级的h5 Web app,便于分离以及... ...
分类:
Web程序 时间:
2016-09-24 19:08:45
阅读次数:
205
第33 章项目实战-兼容响应式布局[2]学习要点:1.搜索响应式2.底部响应式 本章主要开始如果将前两个项目再进行重构,设计成既可以在PC 端正常显示,又可以在PAD 上浏览,还可以在移动端有良好的体验。这些都必须兼容,那只有使用响应式设计了。一.搜索响应式在PC 端,我们将搜索的文本框和按钮至于大 ...
分类:
其他好文 时间:
2016-09-20 12:18:49
阅读次数:
238
第33 章项目实战-兼容响应式布局[1]学习要点:1.响应式初探2.起始部分 本章主要开始如果将前两个项目再进行重构,设计成既可以在PC 端正常显示,又可以在PAD 上浏览,还可以在移动端有良好的体验。这些都必须兼容,那只有使用响应式设计了。一.响应式初探在前面的两个项目中,我们分别设计了PC 端固 ...
分类:
其他好文 时间:
2016-09-20 11:55:26
阅读次数:
157
第33 章项目实战-兼容响应式布局[3]学习要点:1.标题响应式2.图片响应式 本章主要开始如果将前两个项目再进行重构,设计成既可以在PC 端正常显示,又可以在PAD 上浏览,还可以在移动端有良好的体验。这些都必须兼容,那只有使用响应式设计了。一.标题响应式在首页的热门旅游这个主要区域,有一个大标题 ...
分类:
其他好文 时间:
2016-09-20 11:50:34
阅读次数:
218
网页布局技术的演变 表格Tbale布局 → Div + CSS浮动 → Flex Box布局响应式设计 即网页能够适应多种大小的屏幕,遵循“响应式”设计原则,CSS3引入了一种新的页面方式——“Flex Box 布局”。★设计总原则★“大块套小块”,“小块套更小的块”,先绘制出页面布局草图,定好设计... ...
分类:
Web程序 时间:
2016-09-17 14:55:26
阅读次数:
171
Jason Grigsby发表了篇文章,《CSS Media Query for Mobile is Fool’s Gold》对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法。然后 ...
分类:
其他好文 时间:
2016-09-06 19:41:00
阅读次数:
140
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手机的屏幕尺寸远小于计算 ...
分类:
其他好文 时间:
2016-08-30 20:59:06
阅读次数:
225
一、基础知识 1.整体架构 以响应式设计为理念,css组件、js插件+jquery、基础布局组件和12栅格系统搭建。 1.1响应式设计:结合media query查询,适应更多设备,自动适应用户的设备环境,不必为每个终端做一个特定的版本。 2.css12栅格系统 将容器平分12份,行(row)必须包 ...
分类:
其他好文 时间:
2016-08-26 12:07:50
阅读次数:
156
在IE6-8中完全是不支持CSS3 Media Queries的。那么为了让IE6-8支持,我们就很有必要的在IE9以下的浏览器中加上media-queries.js或者respond.js脚本: <!--[if lt IE 9]> <script src="html5shiv.min.js"></ ...
分类:
其他好文 时间:
2016-08-23 12:58:50
阅读次数:
119
页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不 ...
分类:
其他好文 时间:
2016-08-15 11:32:37
阅读次数:
202