响应式开发从原理到实战案例(一):响应式基本概述

响应式基本概念

响应式就是指同一个页面,在不同大小的屏幕上显示对应风格。如下图所示

响应式的主要特点:页面的代码不变,根据屏幕的大小调整布局(什么样的布局是由前端人员来设计)

什么地方用到响应式?

  • 网站的内容并不是很多,如:公司的官网、宣传页面、产品列表、图片列表
  • 使用响应式网页的特点:页面的内容比较少,布局也不复杂

为了更加直观,我们对比一下。

无响应式的网站

响应式网站

Web App网站

通过对比上面的网站,我们可以总结出这样的内容:

  1. 内容比较简单的页面适合做响应式,提升用户的体验
  2. 网页的内容比较丰富、类别比较多,如京东、天猫、淘宝网。这样比较大型的网站不宜做响应式。而是独做Web App来取代
  3. PC端对应的移动端网址喜欢用 m.域名的方式。例如:m.taobao.com   m.jd.com。

在工作上,什么情况下会考虑做响应式开发了?可能有下面的几种情形。

  • 老版本网站改版升级要求支持响应式
  • 中小型网站会考虑响应式应用
  • 很多企业为了快速获取用户,会优先开发移动端,然后扩展到PC端。

自适应和响应式的区别

自适应:解决如何才能在不同大小的设备上呈现同样的网页(页面的内容和布局不改变)


响应式:根据不同的设备做出相应的调整,调整布局或是元素(页面的内容和布局是有改动的)



------------------------------------下一节的内容是:《制作没有响应式的静态页面》------------------------------------

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智学无忧-老曹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值