制作响应式网页
使用 Bootstrap来开发移动网站的响应式网页, Bootstrap来自 Twitter设计师MarkOtt和 Jacob Thornton合作开发,是目前很受欢迎的前端框架。 Bootstrap是基于HTML、CSS、 JAVASCRIPT的一个 CSS/HTML框架。国内一些移动开发者较为熟悉的框架,如weX5前端开源框架等,也是基于 Bootstrap源码进行性能优化而来。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
响应式手机为小屏幕设备,其屏幕在480px以下;平板电脑为中等屏幕设备,其屏幕介于81pX-768pX之间;PC为大屏幕设备,其屏幕在769px以上。 Bootstrap框架可以方便地Bootstrap框架在开发移动站点前端页面时,采用灵活的栅格布局模式。
栅格布局模式,即在更大屏幕情况下使用更大 margin的多列布局,随着分辨率的不断缩小,在小屏幕中由于灵活的栅格或液态图片,内容的显示方式是随着某列的内容依次往下排。栅格布局,默认将屏幕分成12列,使用标签布局网页得到了极大的简化。
例如,< diy class="col-sm-10col-md-8">表示:在中等屏幕设备上该div占用8列的宽度;在小屏幕上该div占用10列的宽度。
如何让网站更好的适配成功
1.在站长平台提交开放适配 Sitemap文件
为了更快地告知百度移动搜索PC网站与移动站内容的一一对应关系,建议使用站长平台开放适配工具,进行适配关系提交。
进入百度站长平台一开放适配http://zhanzhang.baiducom/mobiletools/add3.使
2:用Meta标签协议规范
移动网页采用了响应式网页设计,例如网址为htp:/cdc.tencent.com,不需要经过URL自适配跳转就可以根据浏览器的屏幕大小自适应地展现合适的效果,同时适合在移动设备和电脑上进行浏览如果只适合在移动设备上进行浏览的网页。
还木有评论哦,快来抢沙发吧~