神州彩票靠谱吗: HTML5框架的搭建,怎么进行响应式布局

神州彩票app下载安装 / 网站建设 / 时间:2017-03-28 09:29

神州彩票app下载安装 www.38uoo.com.cn 如何做响应式布局?HTML5框架如何搭建?HTML5手机端网站代码自适应的写法很多只懂前端HTML的朋友都不知道,设计出网页的时候只能PC端访问,手机端访问会出问题;而且最近公司可能会有相关反向的知识扩展,下面桂林SEO结合网上的知识给大家分享下响应式布局的代码和写法要点:

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标签(媒介查询)来实现。不了解媒介查询的朋友,可以看看这篇文章:怎么进行响应式布局,HTML5框架的搭建,在这里重庆SEO详细讲解下,利用添加meta标签来做手机网站。

基本在网页头部我们只需添加四个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>

(4)关于移动端HTML5网站响应式布局效果查看问题

有两种方式:其一用真机测试,这个如果是做开发的话必须得;其二;在浏览器上测试,可以chrome(谷歌浏览器)的F12调试工具:有个手机样的小图标,点击就能模拟手机测试。

特殊说明:图标特殊代码说明

要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ,前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层,后者则不会添加这些效果,代码如下:

Markup

<linkrel="apple-touch-icon-precomposed"href="//3gimg.qq.com/wap30/info/info5/img/logo_icon.png">


神州彩票app下载安装半杯酒博客文章,转载请注明原文网址摘自 //www.38uoo.com.cn/wangzhanjianshe/77.html,谢谢配合!

微信扫一扫,关注我们
1
神州彩票app下载安装
  • 养老投资:适合的才是最好的 2019-01-24
  • 江西吉安永丰县:芒种农忙(图) 2019-01-23
  • 库尔勒丝路旅游小镇预计10月投用 2019-01-22
  • 脸上长痘代表对应内脏有问题?专家:未发现相关性 2019-01-21
  • 水煮 —频道 春城壹网 七彩云南 一网天下 2019-01-20
  • 聚焦机构改革:新部门接连挂牌 快速进入角色 2019-01-19
  • 哦。对了,那些成天嚷嚷“亲不亲,阶级亲”的人应该把这些货真价实的“无铲阶级”接回家去。[哈哈] 2019-01-18
  • [大笑]一群老蚕的小萌们想阻挡大势?没门儿! 2019-01-18
  • 用剩豆渣做丸子 人人都爱吃起来就停不住嘴-美食资讯 2019-01-17
  • [鄙视]把祖宗十八代都抹除了的不孝子孙才是吃狗粮长大滴! 2019-01-17
  • 夷陵区开展“关爱女性健康 助力精准扶贫”两癌免费筛查 2019-01-16
  • 紫光阁中共中央国家机关工作委员会 2019-01-16
  • “奋斗了就有答案” 江西宁都县曾北方带领残障人士创业 2019-01-15
  • 山西省十三届人大常委会召开第6次主任会议 2019-01-14
  • “长城新媒体”官方微信、微博 2019-01-13
  • 636| 691| 907| 180| 512| 973| 964| 639| 966| 768|