自适应/响应式的功课.....

请开始清算市面上的电子产品,得有百八十种的屏可以供君挑选....这其实对在前端一线工作的程序员而言挺灾难
的....

自适应/响应式概念

解决不同终端的适配问题,我们一般有两套方案,一是自适应布局,二设置响应式布局.

所谓的自适应就是屏幕变大或是变小,它的内容也要做到同步缩放,到某个宽度了会过于拥挤,内容展示不清,那就喊停加个min-width;
而响应式就是不同分辨率都可以私人定制一套样式布局,大码女孩穿xl,而纸片girl穿xs~

总而言之,就是自适应的样式布局从一而终,可以在不同分辨率的终端上显示同一样式的网页,灵活设置宽度,而响应式的样式布局都会有或多或少的调整....

自适应的网站: https://status.heroku.com/
响应式的网站: https://www.microsoft.com/zh-cn/

(贴两个网站,自助缩放,自行体会...)

开发工作场景

分辨率跨度太大,想要做到完美适配非常难的...正常情况下公司一般都会做两套版本,一个应用在pc端,一个运用于移动端...

但做两套设计一定会导致开发和维护成本较高,所以为了节约点开发时间,还是会有些追求快速开发的公司希望可以只做一套设计适配各个终端,这时候就得依赖响应式的布局了....

响应式布局的经典体验就是bootstrap. 他自动识别屏幕的分辨率,做出相应的调整,布局和内容或多或少会有点不一样....比如本来横向导航条变成汉堡菜单,本来一行三图,变成一行一图,本来的pc上展示的模块隐藏了...

完成一个响应式的页面要:

• 需要允许网页宽度自动调整,第一个动作就是在head里头加一行viewpoort标签

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  

• 不可设置固定宽度,可以width的值可以设置百分比,或是auto或是rem.
• 字体单位最好使用em或者rem
• 流式布局各个区块都是浮动的,宽度不足,自动掉下,避免出现横向导航条....注意绝对定位要少用!
• 利用 media,不同宽度引入不同的css文件
• css@media规则,统一css文件可以根据不同分辨率,选择应用不同的css规则
• 图片要自动缩放,即设置 max-width;100%

本篇写于:学习了https://my.oschina.net/u/1992... 之后...