响应式Web初级入门
跨终端时代的到来
当你乘坐各种交通工具(公交、地铁、轻轨、火车)时你会发现,人们都个个低下头在玩自己的手机、平板、Kindle,没错,你正在处于一个多终端设备的时代!手机用户连年上升,前几天我们在感叹以前玩沙包、陀螺,现在小孩的娱乐就是玩手机–。另外,微软的Xbox和任天堂的Wii等游戏设备也有自己的浏览器。设备真的来了。。
现在网站主流跨终端的有以下方式:
单域
比如前端乱炖和我的个人博客都属于此一类。此类网站具有只编写一次就能实现跨终端的需求,维护起来相当方便。但缺点也很明显,加载不必要的JS和CSS比往常相比巨多。
单域还有一种情况,就是多个模板,你用移动设备可能访问一个网站,最底下会有访问桌面版,访问触屏版等,他会重新加载模板。
提示访问移动版随之进入移动版,HTML结构也会发生变化
多域
如神马搜索和百度(http://www.baidu.com),当用桌面浏览器和移动浏览器访问的结果是不一样的。其中的手段可能有两种:
- Ngix反向代理判断
- 服务端直接判断UA输出不同的界面,JAVA和PHP等后台语言都提供了支持框架
两家都对移动端做了专门的页面,这样进行功能的拆减,用户体验当然大大提高,但有需求发生变化时,往往要更改两处地方。
多终端
也就是前端最不想看到的,很多公司为了提高更好地用户体验都使用native开发,如IOS的OC,SWIFT,Andriod SDK等。功能强大,接口丰富,缺点就是更新起来异常困难,很多用户都不想过几天就安装一个APP。
本文主要讲第一种单域(响应式)
的情况
响应式Web
响应式Web设计最早在2010年EthanMarcotte发表过一篇文章《Responsive Web Design》,基本每本将响应式的书籍都将他提起,那个例子太经典提起,文中援引了响应式建筑设计的概念:
最近出现了一门新兴的学科——”响应式建筑(responsive architecture)”——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产”智能玻璃”:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。
澄清一点,响应式站点不等同于移动站点,他只是一种开发移动站点的策略。其实按照这个说法神马搜索是一款纯粹的移动WEB APP,因为它没有桌面版。
为移动而生,专注移动搜索的神马搜索
三种布局方式
现存的布局哪一种更加适合做响应式的网站呢?一般来说有以下三种布局:
固定布局
应该是新手开发人员最喜欢用的布局方式,简单粗暴,设计稿是多少PX,写CSS时就多少PX,对页面的控制力度是最强的,上下级没有联系,想调哪个就调那个,如果设置box-sizing:border-box;
,甚至对整个布局都没有影响。
最常见的就是body
使用960px
的像素,有以下两个因素:
- 适应正方形的老式屏幕;
- 两边补白,让宽屏用户不觉得那么聚集;
- 960可以被3、4、5、6、8、10、12、15整除。
但问题是这么做毫无响应式可言,会出现很恶心的横向滚动条
,另外,移动端的浏览器会默认的将网页缩小,根本无多终端性
可言。
流式布局
在流式布局中,度量单位不再是简单的像素,而是百分比。这使得页面具有可变性。
当缩小浏览器边框时,万恶的横向滚动条
消失了。缺点就是有些文本的行宽会看起来太宽,而在小屏幕看起来太窄
当然,在良好的支持CSS3的移动浏览器下,使用flex布局
更加有优势!
弹性布局
这次度量单位又变了,通常情况以em为单位,但是em太依赖于父级,好在CSS3提供了更好的rem方式
(这个demo找的不好,因为table表格本来就有流动的属性display:table;display:table-cell;
)。
其实细想一下,选择布局方式其实是对度量单位
的选择!
另外还有网格布局
方式,bootstrap就是采用12栅栏布局,另外前不久winner也谈了一些淘宝提供的可伸缩布局方案:lib.flexible,按照DEMO来看,其使用的是rem
方式,在改变视窗大小的时候动态的改变基准的比例(浏览器默认是16px
,设置器基准大小为62.5%
)。还有人提出来的混合布局
,但无论哪一种,都离不开上面固定布局
,流式布局
,弹性布局
,三种的支撑。
综上所述,流式布局
或弹性布局
或许是响应式布局的更好方式。
媒体查询
难道有流式布局
或弹性布局
就够了吗?就像一个屌丝升职加薪就够了?不当上CEO怎么赢取白富美?
媒体查询可以让你根据在特定环境下查询到的各种属性值-比如分辨率
,色彩深度
,高度和宽度
(包括设备宽度与视觉宽度),横向纵向
,设备像素比
来决定应用什么样的样式。
我们可以看到我们上面的那些DEMO(我承认这个DEMO找的不好,是从今年阿里校招题目里面抠出来的),当我们改变浏览器大小时,左边的列表实在是太丑,但是使用媒体查询后的效果就不一样了。
媒体查询的语法
语法很简单
@media [not|only] type [and] [expr] { rules }
解释一下:
not only:逻辑关键字 - expr:媒体表达式
- type:媒体类型
- rules:CSS样式
1.逻辑关键字
有and,not,or,only等,前三个不多说,最后一个是因为很多较老的浏览器支持媒体类型,却不支持媒体查询,有时候导致浏览器去尝试下载那些你不希望用户看到的样式。
2.媒体表达式
表达式支持的也很多,这里也不列举了,重点有: * 表示显示区域的width
和height
* 表示设备区域的device-width
和device-height
* 表示横屏还是竖屏的orientation
* 表示设备像素比device-pixel-ratio
3.媒体类型
媒体类型有很多,感兴趣下来查一下,这里就不列举了,一般大多网站设置的是screen,如不你嫌麻烦可以什么都不写(默认为all),支持所有设备。
4.规则
就是你想要在这个环境下想展示出的CSS
下面一个简单的示例:
@media sreen and (min-width: 320px) { }
另外,媒体查询也可以使用在外部样式上,如:
<link media="only sceen and (min-width:1300px)" type="text/css" href="style.css">
关于断点
这里说的断点不是传统意义的调试断点,而是一些常用的标准宽度
:
- 320px(iPhone和其他一些设备)
- 769px(iPad)
- 1024
依赖这些断点会有一个问题,今天流行的明天未必流行,而且在断点过渡的时候会显得很突兀,所以,确定断点的一个原则是追随内容。让设计稿,内容来确定你的断点。
前端乱炖的断点
兼容性
一般的,在IE9一下,加载下列CSS
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
图片和视频
图片
对于背景图片来说,CSS3有个属性为background-size
,设置为100%就可以自适应,但是在小屏幕的移动设备加载大图片有点杀鸡焉用宰牛刀
,一般为了加快速度,我们的策略是:有选择性的加载图片
,一般会有以下四种方法:
1.万能的媒体查询
只加载与当前屏幕相匹配的图片
2.JS做判断
JS提供了一个方法:window.matchMedia
,可以把CSS媒体查询作为参数传入,返回相关媒体查询是否匹配的信息。
使用方法:
if(window.matchMedia('(min-width:320px)').matches) { //其他代码 }
我们可以利用他来加载合适的图片。
3.使用src.sencha.io
src.sencha.io
可以传入需要的尺寸和图片地址,自动来压缩图片,使用了CDN+缓存策略技术。当然,我们的服务端也可以自己来实现
图片已经被压缩到320px
4.SVG
对于图片伸缩的问题,也可以采用可伸缩矢量图(SGG)来解决。
有关SVG的资料请戳大漠的w3cplusSVG标签。
视频
视频的方式与上面类似,可以使用媒体查询
和js matchMedia
,当然,用设备看视频的一般是WIFI下,所以直接使用max-width:100%;height:auto;
也是可以的。如果是连接站外资源,如优酷
难么,一般解决方法是放到一个iframe里面,详情请看站外引用的优酷视频,怎样让视频高度自适应?
<div style="width:320px;height:180px" > <iframe height="100%" width="100%" src="http://player.youku.com/embed/XNjA3NjQ0MzE2" frameborder=0 allowfullscreen></iframe> </div>
总结
写到这边,算是对响应式的一个初级入门吧,但个人觉得,做起来原理简单,但如果设计一个响应式的网站?怎样保证他的高质量?怎么不会影响到速度?已有网站怎么改为相应式的?这些才是真正值得我们研究的东西。
扩展阅读
响应式Web初级入门的更多相关文章
- HTML5、CSS3与响应式Web设计入门(1)
HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- CSS响应式web设计
参考 1. 响应式web设计之CSS3 Media Queries http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 2. 用 ...
- [转]响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- 【01】《响应式Web设计:HTML5和CSS3实战》
[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局, ...
- 什么是响应式web设计
什么是响应式web设计 现在开发一个产品,基本上都会需要兼顾 PC端和 移动端. 一般有两种思路: 1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码. 2.一个网站能够兼容 ...
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- <HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
随机推荐
- COGS103&tyvj1899 [NOIP2002]矩形覆盖
题目里给的范围是k<=4,但是官方数据并没有k==4的情况,导致一些奇奇怪怪的DP写法也能过.听说标程在k==4的时候有反例,掀桌-.. 难怪COGS上k==4的数据答案是错的. 还是好好写个搜 ...
- Linux File System
目录 . Linux文件系统简介 . 通用文件模型 . VFS相关数据结构 . 处理VFS对象 . 标准函数 1. Linux文件系统简介 Linux系统由数以万计的文件组成,其数据存储在硬盘或者其他 ...
- 数据结构算法C语言实现(二十)--- 6.3.1遍历二叉树
一.简述 二叉树的遍历主要是先序.中序.后序及对应的递归和非递归算法,共3x2=6种,其中后序非递归在实现上稍复杂一些.二叉树的遍历是理解和学习递归及体会栈的工作原理的绝佳工具! 此外,非递归所用的栈 ...
- php常用函数(持续更新)
每一种编程语言在用的过程中都会发现有时候要一种特定需求的功能函数,结果没有内置这样的函数,这个时候就需要自己根据已有函数编写尽可能简单的函数,下面是我在做php相关工作时积累下的函数,会持续更新,您要 ...
- POJ 1330 Nearest Common Ancestors(Targin求LCA)
传送门 Nearest Common Ancestors Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 26612 Ac ...
- android toast几种使用方法
toast经常会用到,今天做个总结,特别是自定义toast的布局,值得一看. 一.默认展示 // 第一个参数:当前的上下文环境.可用getApplicationContext()或this // 第二 ...
- 常见linux命令释义(第六天)——shell环境变量
太懒了,这几天好像得了懒癌,一点都不想写博客.后来想想,知识嘛,还是分享出来的好.第一治自己的懒癌:第二顺便巩固下自己的知识. Linux的变量分为两种,一种是系统变量,是系统一经启动,就写进内存中的 ...
- linux下samba的安装与使用
samba挺好用的,配置项不多,正好适合我这种懒人使用. 下面是CentOS上面的安装与使用方法. 安装:yum -y install samba 安装一个名字叫samba的软件,安装过 ...
- 网络存储(四)之ISCSI的进阶
前言 上一篇博客中我们讲了如何搭建一个简单的iscsi网络存储系统,这块有个安全问题就是,任何知道target name的客户端都可以随意连接ISCSI服务器.但是很多时候,通过授权认证连接共享磁盘或 ...
- POJ1915Knight Moves(单向BFS + 双向BFS)
题目链接 单向bfs就是水题 #include <iostream> #include <cstring> #include <cstdio> #include & ...