如何制作H5响应式网站

如何制作H5响应式网站,第1张

1、选择建站工具,不懂技术的可以用nicebox那一类的模板建站
2、选择一套模板进行安装,修改模板里面的和文字,改成自己的特色
3、预览网站,对网站的细节进行微调排版,比如手机和平板是特别容易错乱的
4、上传发布网站
5、坚持做网站关键词优化

随着移动和跨屏时代的来临,响应式网页越来越重要,通过网页制作,使得不同设备、分辨率的网站都有最好的视觉体验。那就前端方面,该怎么才能制作一个响应式网页呢?
工具/原料
网页编辑器
Photoshop
方法/步骤
需要先有大屏幕和小屏幕两版的设计稿,或者超大屏幕、大屏幕和小屏幕三屏,以下是两屏设计,适应PC端和移动端。
将两屏所需的,用photoshop分别切出来,保存在两个文件夹,方便管理,每一个版本只会调用对应版本。
meta头部设置参数,根据设备分辨率让浏览器的可视宽度来适应。
进入html框架部分,多版本元素一致情况下,按照其中一个版本添加html的Dom元素即可。若有差异的话,也要在对应的位置,添加Dom元素,后续通过css或者js使该部分隐藏。
进入CSS编写部分,个人习惯是从大屏幕往小屏幕编写的,因为大版本通常包含的元素比小版本要多。
CSS使用媒介查询-Media Queries方法进行编写,分别写不同版本的CSS样式。
由于媒介查询的方法,并不适应低版本的浏览器,需要加入JS去帮助兼容,以下JS可上网下载。需要注意点是此JS一般需要跟网站的indexhtml放在同一个目录下,不适合分开管理,否则无法加载或者样式。
>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13341634.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-18
下一篇 2023-07-18

发表评论

登录后才能评论

评论列表(0条)

保存