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

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

自适应/响应式概念

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

所谓的自适应就是屏幕变大或是变小,它的内容也要作到同步缩放,到某个宽度了会过于拥挤,内容展现不清,那就喊停加个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... 以后...