什么是响应式页面?

前几年火的一个概念:响应式页面。

  1. 什么样的页面是响应式页面?

  2. 响应式页面用到哪些技术?

  3. 响应式页面和自适应页面有什么区别?


什么是响应式页面?

首先你要理解什么是「响应」。

  • 悟空拿着宝瓶,对金角大王叫了「金角大王」,金角大王应了一声。这就是「响应」。
  • 武昌起义成功之后,各地纷纷也开始革命。这也是「响应」。

「响应」就是「你动,我也动」。

「响应式页面」就是「随着设备属性(如宽高)的变化,网页也随着变化。」

如上图,左边是 PC 上页面的样子,右边是手机上页面的样子。

响应式页面用到哪些技术?

主要是 CSS 的一些技术:

  • 多使用 max-width、min-width,不写死宽度
  • 使用 media 查询来响应不同分辨率
  • 使用动态 REM 方案保证手机端的显示效果
  • 等等,以后细讲。

响应式页面和自适应页面的区别

自适应页面(流体布局、fluid layout)指的是页面宽度不固定。跟响应式页面没有什么关系。

自适应页面强调「不写死宽度」;响应式页面强调「响应」。

自适应页面可以是响应式的,也可以不是响应式的。

响应式页面可以是自适应的,也可以是不自适应的(也就是定宽的)。

完。

自习链接:

自适应设计与响应式网页设计(这个文章中的概念跟我说的不太一致,注意区分)

自适应网页设计(Responsive Web Design)(应该翻译为响应式网页设计)

作者:方应杭

40 thoughts on “什么是响应式页面?”

  1. Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective. A lot of times it’s difficult to get that “perfect balance” between usability and visual appearance. I must say you have done a superb job with this. In addition, the blog loads very quick for me on Chrome. Exceptional Blog!|

  2. I am extremely impressed with your writing abilities and also with the layout for your blog. Is this a paid subject or did you modify it yourself? Anyway keep up the nice quality writing, it’s rare to peer a great blog like this one today..|

  3. Hello, Neat post. There is a problem with your website in web explorer, would check this? IE still is the market chief and a huge section of people will pass over your great writing due to this problem.|

  4. Hi everyone, it’s my first pay a quick visit at this web site, and piece of writing is actually fruitful designed for me, keep up posting such articles or reviews.|

  5. Amazing things here. I’m very glad to look your article. Thank you a lot and I am taking a look ahead to touch you. Will you please drop me a mail?|

  6. all the time i used to read smaller articles or reviews which as well clear their motive, and that is also happening with this paragraph which I am reading here.|

  7. Hi, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam remarks? If so how do you reduce it, any plugin or anything you can recommend? I get so much lately it’s driving me mad so any assistance is very much appreciated.|

  8. I have been surfing online greater than three hours these days, but I by no means discovered any interesting article like yours. It is lovely worth sufficient for me. Personally, if all site owners and bloggers made excellent content as you probably did, the internet can be a lot more helpful than ever before.|

  9. It’s going to be ending of mine day, but before end I am reading this wonderful paragraph to improve my experience.|

  10. Hey! I could have sworn I’ve been to this website before but after browsing through some of the post I realized it’s new to me. Nonetheless, I’m definitely delighted I found it and I’ll be book-marking and checking back frequently!|

  11. What’s up it’s me, I am also visiting this web site on a regular basis, this website is truly fastidious and the visitors are in fact sharing nice thoughts.|

  12. We are a group of volunteers and starting a new scheme in our community. Your site provided us with valuable info to work on. You have done a formidable job and our entire community will be grateful to you.|

  13. Please let me know if you’re looking for a article author for your blog. You have some really great posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d really like to write some content for your blog in exchange for a link back to mine. Please blast me an email if interested. Many thanks!|

  14. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same comment. Is there any way you can remove me from that service? Appreciate it!|

  15. Greetings! I know this is kinda off topic however I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog post or vice-versa? My blog addresses a lot of the same topics as yours and I believe we could greatly benefit from each other. If you are interested feel free to send me an email. I look forward to hearing from you! Wonderful blog by the way!|

  16. Hi there would you mind sharing which blog platform you’re using? I’m going to start my own blog soon but I’m having a difficult time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I’m looking for something unique. P.S Apologies for getting off-topic but I had to ask!|

  17. Awesome website you have here but I was curious about if you knew of any community forums that cover the same topics discussed in this article? I’d really love to be a part of community where I can get feed-back from other knowledgeable people that share the same interest. If you have any suggestions, please let me know. Appreciate it!|

  18. Hello there! This is kind of off topic but I need some guidance from an established blog. Is it very difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about creating my own but I’m not sure where to start. Do you have any tips or suggestions? Many thanks|

  19. When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service? Cheers!|

发表评论

电子邮件地址不会被公开。