网页编辑软件

  • 栏目:服务优势 时间:2020-12-28 16:47 分享新闻到:
<返回列表

网页编辑软件:HTML5移动端手机网站开发流程

一样 如果你能知道它的流程 我相信就不会觉得做手机网站难 真正难的是你没有思路。

二、把html5这门技术想的高深莫测

好像觉得学会用html5 css3做手机网站 就相当于学会了顶尖的绝世武功。其实你错了 不要把html5这玩意想的太高深 其实做手机网站 真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言 你的手机网站是用HTML5 CSS3做的啊 简直牛逼呀 能用上目前互联网上最新最前沿的技术。其实明眼人一看 就知道是用什么技术做的。俗话说的好 外行看热闹 内行看门道 )

好了扯了这么多 下面就说说怎么来开发移动手机网站吧

基本上开发手机网站 可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。

一、框架开发手机网站

一般用现在常用的开发框架有 目前Web前端最火的框架 BootStrap 、Jquery mobile..当然可能还有一些移动端开发的框架 这些我就没具体去研究过。

为什么说BootStrap是目前前端最火热的开发框架呢

因为bootstrap自带响应式布局 栅格系统 而且能做到移动设备优先的原则。

运用bootstrap来开发网站有什么好处呢

1.不懂设计也可以做网站

就算不懂设计 你的网页在Bootstrap的帮助下 也能拥有超高颜值。它强大的内置样式库让你的作品变成尤物。

主要体现在 字体文件和bootstrap自带的UI样式。 为广大不会UI设计的程序员 提供了福音

2.上手快

你可以专心解决问题 冗繁的细节都丢给Bootstrap操心。可以做到一次开发 就可适配所有终端 并且能迅速上手并建出网站原型。还提供很多丰富的插件 就算你不会JS 基本能看懂常见的API 网站上的效果 基本能解决。

缺点

1.不遵循最佳实践

我们在使用Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一 HTML不再有语义 而且内容和表示不再分离。前端纯粹主义者会觉得这相当令人讨厌 以为它使可扩展性、重用性和维护性遇到了更大的挑战。

2. Bootstrap 太重

直接点说 就是CSS和JS有点点大。CSS压缩后115k,JS压缩后35k

如果你想要使用Bootstrap的所有功能 你应该好好考虑资源的加载时间。当然 对于一些地方这可能不是问题 但是在新西兰互联网不得不横跨太平洋 这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。

相信任何框架都有它的优点 同时也是有它的缺点的。没有一个产品是很完美的 所以根据自身实际情况进行选择。至于一些其它框架暂时不做过多的解释了 相信只要你肯愿意百度一下 就可以找到你想要的答案。

二、手写手机网站

一般我们自己手动开发手机网站的话 基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现 网页指html5的格式来开发 。另一类是通过CSS3的Media标签 媒介查询 来实现。不了解媒介查询的朋友 可以看看这篇文章 。

在这里我们详细讲解下,利用添加meta标签来做手机网站。

基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。

1、添加viewport标签

 meta name viewport  content width device-width, initial-scale 1.0, maximum-scale 1.0, user-scalable 0  / 

详细属性

width  ----  viewport的宽度 width device-width意思是 宽度等于设备宽度 
height ------  viewport的高度 height device-height意思是 高度等于设备宽度 
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放

关于viewport的详细原理和知识点 各位就百度吧 在这里我就不做详细的讲解了。

2、禁止将数字变为电话号码

 meta name format-detection  content telephone no  / 

一般情况下 IOS和Android系统都会默认某长度内的数字为电话号码 即使不加也是会默认显示为电话的 so 取消这个很有必要

3、iphone设备中的safari私有meta标签

 meta name apple-mobile-web-app-capable  content yes  / 

它表示 允许全屏模式浏览 隐藏浏览器导航栏

4、iphone的私有标签

 meta name apple-mobile-web-app-status-bar-style  content black 

它指定的iphone中safari顶端的状态条的样式

默认值为default 白色 可以定为black 黑色 和black-translucent 灰色半透明

另外还有一个个性化的link标签 它支持用户将网页创建快捷方式到桌面时 其图标变为我们自己定义的图标。比如手机腾讯网上的标签

 link rel apple-touch-icon-precomposed  href http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png 

不过腾讯对这个png图标的命名并不规范 常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png 前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层 后者则不会添加这些效果。

手机网站基本框架代码

 !doctype html 
 html 
 head 
 meta charset utf-8 
 title 手机网站 /title 
 meta name keywords  content  / 
 meta name description  content  / 
 meta name viewport  content width device-width, initial-scale 1.0, maximum-scale 1.0, user-scalable 0  / 
 meta name format-detection  content telephone no  / 
 meta name apple-mobile-web-app-capable  content yes  / 
 meta name apple-mobile-web-app-status-bar-style  content black 
 meta name author  content duanliang, duanliang920.com  / 
 style 
    body{font-size:62.5%;font-family: Microsoft YaHei ,Arial; overflow-x:hidden; overflow-y:auto;}
    .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
 /style 
  /head 
 body 
     div 
        大家好 我是段亮 这是我的第一个手机网页哦 
     /div 
 /body 
 /html 

下面是我做的基于微信二次开发的手机页面案例

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着CSS3的兴起 有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位 能实现响应式的那种。它是相对于html根元素来设置当前文字大小 或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同 所以才使用rem的。这点我也不是很清楚 也请教了一些做手机网站的高手 了解了一些信息。

原来大部分的人依旧是使用PX来布局 rem都用的少。目前来说 就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处 还得需要大神来解答这个问题 毕竟我也只是刚接触。

关于手机网站的调试问题

一般我们采用的 在浏览器调试 真机测试 因为浏览器毕竟只是一个模拟工具 实际开发的话 我们还得用真机去测试。

比如 Android类手机 iPhone5、5s、6、6Plus...

而在浏览器上测试 可以chrome 谷歌浏览器 的F12调试工具 有个手机样的小图标 点击就能模拟手机测试。

如下图

或者用火狐的测试工具 按shift ctrl M进行查看。

写在最后 其实等你真正熟悉做手机网站这套流程后 你会发现做手机网站没有你想象的那么难 真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同 因为移动端有移动端的事件 这也是我为什么老是强调学JS 是学原生JS 而不是学Jquery。我的下篇文章就会讲到 为什么学JS要学原生JS 喜欢的朋友可以下博客。(以上均是段亮个人经验 如有不足的地方可以指出 相互学习 )

觉得本篇文章 对你有帮助的话。你可以选择赞助我的博客 支付宝 因为有你的支持 我才走得更远 (*^__^*) ...


抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

分享新闻到:

更多阅读

网页编辑软件

服务优势 2020-12-28
网页编辑软件:HTML5移动端手机网站开发流程 一样 如果你能知道它的流程 我相信就不会觉得做...
查看全文

小程序的流量红利都来自哪里?

服务优势 2020-11-24
...
查看全文

企业网站制作更能吸引潜在客户

服务优势 2020-11-23
大伙儿都了解,公司以便进行在网上主题活动,公司网站建设不可或缺。可以迅速的协助客户...
查看全文
返回全部新闻


区域站点: 南丰县h5和小程序有什么区别   南宫市h5微信   囊谦县h5免费   南和县h5抽奖大转盘制作   南华县h5和小程序有什么区别   南江县h5微信   南京市h5免费   南靖县h5抽奖大转盘制作   南康市h5和小程序有什么区别   南乐县h5微信   南陵县h5免费   南宁市h5抽奖大转盘制作   南平市h5和小程序有什么区别   南皮县h5微信   南市区h5免费   南通市h5抽奖大转盘制作   南投县h5和小程序有什么区别   南雄市h5微信   南溪县h5免费   南阳市h5抽奖大转盘制作   南漳县h5和小程序有什么区别   南召县h5微信   南郑县h5免费   那坡县h5抽奖大转盘制作   那曲县h5和小程序有什么区别   纳雍县h5微信   讷河市h5免费   内黄县h5抽奖大转盘制作   内江市h5和小程序有什么区别   内丘县h5微信   内乡县h5免费   嫩江市h5抽奖大转盘制作   聂荣县h5和小程序有什么区别   尼玛县h5微信   尼木县h5免费   宁安市h5抽奖大转盘制作   宁波市h5和小程序有什么区别   宁城县h5微信   宁德市h5免费   宁都县h5抽奖大转盘制作   宁国市h5和小程序有什么区别   宁海县h5微信   宁化县h5免费   宁晋县h5抽奖大转盘制作   宁陵县h5和小程序有什么区别   宁明县h5微信   宁南县h5免费   宁强县h5抽奖大转盘制作   宁陕县h5和小程序有什么区别   宁武县h5微信   宁乡市h5免费   宁阳县h5抽奖大转盘制作   宁远县h5和小程序有什么区别   农安县h5微信   磐安县h5免费   盘锦市h5抽奖大转盘制作   盘山县h5和小程序有什么区别   磐石市h5微信   盘州市h5免费   蓬安县h5抽奖大转盘制作   澎湖县h5和小程序有什么区别   蓬莱市h5微信   彭山县h5免费   蓬溪县h5抽奖大转盘制作   彭阳县h5和小程序有什么区别   彭泽县h5微信   彭州市h5免费   偏关县h5抽奖大转盘制作   平安县h5和小程序有什么区别   平昌县h5微信   平定县h5免费   屏东县h5抽奖大转盘制作   平度市h5和小程序有什么区别   平果县h5微信   平和县h5免费   平湖市h5抽奖大转盘制作   平江县h5和小程序有什么区别   平乐县h5微信   平凉市h5免费   平利县h5抽奖大转盘制作   平罗县h5和小程序有什么区别   平陆县h5微信   屏南县h5免费   平泉市h5抽奖大转盘制作   屏山县h5和小程序有什么区别   平顺县h5微信   平塘县h5免费   平潭县h5抽奖大转盘制作   平武县h5和小程序有什么区别   萍乡市h5微信   平乡县h5免费   平阳县h5抽奖大转盘制作   平遥县h5和小程序有什么区别   平阴县h5微信   平邑县h5免费   平远县h5抽奖大转盘制作   平舆县h5和小程序有什么区别   皮山县h5微信   普安县h5免费   浦北县h5抽奖大转盘制作   浦城县h5和小程序有什么区别   普洱市h5微信   普格县h5免费   浦江县h5抽奖大转盘制作   普兰县h5和小程序有什么区别   普宁市h5微信   莆田市h5免费   迁安市h5抽奖大转盘制作   乾安县h5和小程序有什么区别   潜江市h5微信   潜山市h5免费  

友情链接: 月福步宜 超恒鑫电子

Copyright © 2002-2020 h5免费_h5抽奖大转盘制作_h5和小程序有什么区别_h5微信_手机抽奖小程序 版权所有 (网站地图) 备案号:粤ICP备10235580号