李炎恢:HTML5的发展方向及响应式设计思路

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看211 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 211|回复: 1
收起左侧

李炎恢:HTML5的发展方向及响应式设计思路

[复制链接]
firefighter 发表于 2016-6-17 15:45:54 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
HTML5标准经过多年的修改,最终在2014年定稿,其移动优先的特点,响应式设计的思想吸引着大批开发者加入HTML5的学习大军,这次邀请到李炎恢,来为大家讲讲各位比较关注的方方面面。




提纲介绍

  • H5的三个方向
    • Web设计
    • 音频视频
    • 游戏开发
  • 响应式设计思路
    • 三步设计法则
    • 禁止屏幕缩放和等宽
    • @media响应式
  • 移动端图片和导航条的处理





1、HTML5技术的三个方向



1.1、Web设计

比如网站设计、Web应用程序的界面设计,移动端Web或Web App的界面设计等等。



1.2、音频视频

HTML5对音频视频做了极大的支持和改善,很多应用都是基于这种流媒体开发的,当然也得益于目前国内带宽的爆发性增长。



1.3、游戏开发

基于HTML5绘图功能和强大的JavaScript推动了页面游戏的高速发展。




2、响应式设计思路

李炎恢:HTML5的发展方向及响应式设计思路

李炎恢:HTML5的发展方向及响应式设计思路 - 敏捷大拇指 - 李炎恢:HTML5的发展方向及响应式设计思路


把握响应式设计的方向,要遵循三步设计法则,根据屏幕大小,先考虑移动端,其次考虑平板、小屏电脑等设备,最后考虑大屏PC。



2.1、三步设计法则

第一步、按照移动端设备进行设计,因为移动端的设计需求往往是极简化的,不会存放太多的内容,只保留核心内容;

第二步、按照平板和小屏电脑的分辨率去增加尺寸;

第三步、考虑大屏PC电脑的精细设计。

因为从小到大,比较容易;从大到小反而有诸多限制。



2.2、禁止屏幕缩放及等宽

首先要禁止屏幕自动缩放,并且使页面和屏幕等宽操作,这样字体和布局就不会因为缩放导致缩小看不清。



2.3、@media响应式样式

需要通过CSS3的@media命令对不同尺寸分辨率的设备进行字体和样式的更改,让页面在这个分辨率下更合适。图片则是通过另一种方法实现,直接给需要响应式图片上设置一个最大宽度100%即可。




3、移动端图片的尺寸设计

响应式图片已经清楚怎么设计了?但是图片应该做多大呢?因为不同的移动端设备分辨率都是不同的,在这种情况下设计一张不失真的图片就要讲究一定的技巧。

以苹果的iphone手机为例,其它手机与之类似。

iphone3gs的分辨率是:320x480,它的缩小比例是1倍,所以它的逻辑分辨率还是320x480。

那么iphone4/4s分辨率是640x960,但是它屏幕大小和iphone3gs是一样的,均为3.5寸。所以,它的缩小比例是2倍,逻辑分辨率就是320x480。

iphone6 plus,分辨率高达1242x2208,而它的渲染分辨率为1080x1920,它的缩小比例是3倍,它的逻辑分辨率是414x736。

为了兼容所有iphone手机并使图片满屏不失真,只要大于逻辑分辨率的宽度即可,如果不考虑平板电脑和PC的话,大于414即可。




4、移动端响应式导航条设计

导航条往往很长,在PC端无须考虑太多,但是移动端寸土寸金,显示不了太多的导航内容。这个时候,就需要一点技巧,既要保持页面的简洁,又要体现出导航条的价值。

在导航不太多的情况,可以采用减少导航字体内容或隐藏部分内容的方式让导航在移动端显示出来。如果导航内容较多,可以采用JavaScript单独做一个导航列表默认隐藏起来,当点击这个区域的时候显示出所有导航。Bootstrap库支持这个功能。




QA环节


1、H5的发展趋势,以及就业形势,新技术不断涌现,有点应接不暇,比较迷茫,该怎么办?

答:HTML5发展趋势异常火爆,就业形势相对较好。自然,这个相对较好是相对与其他语言,并没有网上宣传的那么夸张。我个人认为,任何语言你有兴趣,自然会对它学习的更加深入,而不是跟风热门,因为热门的语言早晚会回归理性,只有深入一门你最感兴趣的,你才有较强的竞争力,而就业方面,自然不是问题。而当你有一门语言的深入接触,新技术基本都是用天和周进行学习的进度。所以,当你一周就学完一门新技术,你还会应接不暇吗?


2、H5并不是所有浏览器支持,怎么解决?

答:并不支持所有浏览器是很正常,淘汰那些不支持的浏览器就可以了,如果那些商家和用户使用那些淘汰了的浏览器,那我们淘汰那些商家和用户即可。低质量用户和商家是让一个科技公司倒闭的原因所在,迎合和兼容低质量客户,会增加大量成本,而不能使用新技术。最终使公司面临资金问题。对于淘汰用户和淘汰客户,这个问题,其实不管怎么争论都没有结果。因为运营的公司有它自己的难处,说淘汰客户自己也会面临生存危机。所以,这不是技术上的问题,而是公司在一开始的战略运营问题。科技公司倒闭率非常高,不是仅仅技术选择和客户选择能说得清楚的。


3、em、px、rem如何使用?

答:现在来看,如果做响应式布局,直接使用px即可,因为使用em和rem要不断做计算,比较麻烦。更详细的技术细节可以在移动开发者社区敏捷大拇指前端H5版块查阅。


4、postion相对布局和绝对布局总是用不好,有好的方法不?

答:一般来说,绝对定位不会用在最基本的上面,外部的话,基本不用定位,你要先设置一个相对点,然后相对某点进行定位。




看了大神的分享是否迫不及待想去学呢,别担心,在敏捷大拇指前端H5版块,随时随地学前端!




作者:李炎恢,特级讲师,课程学员超过七百万,瓢城俱乐部创始人、教学总监,资深web讲师,全国知名Php、Web培训讲师,51CTO高招特约微课讲师。


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 推送上首页了~分享到朋友圈微博QQ空间吧~.

查看全部评分

智能科技 发表于 2016-6-18 16:59:00 | 显示全部楼层
对H5没讲什么新意出来,肤浅
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表