如何做响应式布局？HTML5框架如何搭建？HTML5手机端网站代码自适应的写法很多只懂前端HTML的朋友都不知道，设计出网页的时候只能PC端访问，手机端访问会出问题；当出现这些问题时，小白们要如何应对？南宁达内UI教学总监如何教“小白们”逆袭，HTML5框架的搭建，怎么进行响应式布局！
一、响应式布局框架软件和学习点
现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile当然可能还有一些移动端开发的框架：
1、HTML5学习的知识反向
HTML5学习前，必须要学HTML，然后的话需要学习js，是学原生JS，而不是学Jquery，jQuery很多事封装了的。
2、为什么说BootStrap是目前前端最火热的开发框架呢？
因为bootstrap自带响应式布局（栅格系统），而且能做到移动设备优先的原则。
3、运用bootstrap来开发网站有什么好处呢？
（1）不懂设计也可以做网站
就算不懂设计，你的网页在Bootstrap的帮助下，也能拥有超高颜值。它强大的内置样式库让你的作品快速完成。
主要体现在：字体文件和bootstrap自带的UI样式。（为广大不会UI设计的
程序员很有帮助）
4、bootstrap的优缺点
相信任何框架都有它的优点，同时也是有它的缺点的。没有一个产品是很完美的，直接点说：
就是CSS和JS有点点大。CSS压缩后115k,JS压缩后35k；如果你想要使用Bootstrap的所有功能，你应该好好考虑资源的加载时间。
二、自适应手机端网站代码和HTML代码的头部的区别
一般我们自己手动开发手机网站的话，基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现（网页指html5的格式来开发）。另一类是通过CSS3的Media标签（媒介查询）来实现。不了解媒介查询的朋友，
基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。
（1）响应式布局头部mate要加的代码——添加viewport标签
Markup
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
代码解释
Markup
width----viewport的宽度（width=device-width意思是：宽度等于设备宽度）
（2）、禁止将数字变为电话号码
一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，所有加上下面的就不会自动变了
Markup
<metaname="format-detection"content="telephone=no"/>
（3）苹果的ios平台的手机——iphone设备中的safari私有meta标签
它指定的iphone中safari顶端的状态条的样式，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）；另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。
Markup
<metaname="apple-mobile-web-app-capable"content="yes"/><metaname="apple-mobile-web-app-status-bar-style"content="black">
（4）移动端手机网站自适应框架HTML5代码
特殊说明：手机端字体适应大多用的px，但是目前来说，就移动端的淘宝采用rem来作为单位来布局的也有，
Markup
<!doctypehtml><html><head>
（5）关于移动端HTML5网站响应式布局效果查看问题
有两种方式：其一用真机测试，这个如果是做开发的话必须得；其二；在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。
特殊说明：图标特殊代码说明
要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果，代码如下：
Markup
<linkrel="apple-touch-icon-precomposed"href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">
更多HTML5知识尽在达内，搜索南宁达内GET到知识点吸收~
文章出自：http://qh.itpxw.cn/qgtk/201845442.html
文章标题：南宁达内UI总监菜鸟翻身之战—HTML5怎么进行响应式布局
免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉
(责任编辑：深圳学历教育网)
海口达内 访问该机构站点 报名留言 加为好友 用户等级:开放浏览
用户级别:0
机构名称:达内科技教育集团
联 系 人:吴老师
联系电话:
联系手机:
在线客服:
在 线 QQ:
电子邮件:
网站域名:http://hk.tedu.cn/
注册时间:2018-07-27 15:07
最后登录:2021-01-14 09:01
