学习准备

学习准备免费看

了解适配移动端的两种方案,响应式网站的优点和缺点是什么,构建响应式网站的原则

2018-09-06侠课岛    初级拔高       

前端/前端/响应式网站基础入门 13     0     4472

随着近几年国内互联网的飞速发展,以及移动互联网行业的井喷,很多用户浏览网页的习惯已经从传统的PC网站操作转换成了到移动端用手机浏览.在这个大背景下,前端程序员构建响应式网站的需求应运而生,下面我们先简单的说一下我们实际开发中的几种针对移动端适配的方案,以及基本原则

适配移动端的两种方案

响应式网站的构建分为移动端优先和web优先两种方式,其出发点分别是先构建哪一载体的网站,然后根据其内容进行迁移或扩展,具体采用哪种方案通常都是根据公司的运营方向来制定,我们把这类移动端和PC端都在统一域名下,根据屏幕尺寸不同进行适配的方案统称为响应式网站,我们平常浏览的很多网站都是用响应式的方式解决了移动端适配的问题,拿vue.js的官网来举例:

PC

当它的屏幕尺寸进行变化时,他的显示内容则进行了对应的调整,如图:

APP

这是我们非常典型的响应式构建网站的方案,但是其中有一个弊端,也就是业务相对简单清晰的时候利用这种方式会很快的适配各端,一旦整个网站业务很复杂,展示的元素很多,响应式的方式并不能满足该网站的业务需求时,响应式的方案可能会使开发复杂度变高,代码难以维护.

在这种场景下,另一种方案呼之欲出,下面我们看一下淘宝:

tb-pc

当我们手机访问的时候它的域名由https://www.taobao.com 自动切换成了https://h5.m.taobao.com/

tb-app

它们其实是两个独立的网站,本质是根据浏览器识别出的不同设备,来进行对应网站加载,这样就能让我们对PC和WAP进行独立开发,互不影响.

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

13

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?