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

Fourierr 发布于2019-08-30 14:05 / 687人阅读

摘要：请开始清算市面上的电子产品得有百八十种的屏可以供君挑选这其实对在前端一线工作的程序员而言挺灾难的自适应响应式概念解决不同终端的适配问题我们一般有两套方案一是自适应布局二设置响应式布局所谓的自适应就是屏幕变大或是变小它的内容也要做到同步缩放到

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

自适应/响应式概念

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

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

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

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

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

开发工作场景

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

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

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

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

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

不可设置固定宽度,可以width的值可以设置百分比,或是auto或是rem.

字体单位最好使用em或者rem

流式布局各个区块都是浮动的,宽度不足,自动掉下,避免出现横向导航条....注意绝对定位要少用!

利用 media,不同宽度引入不同的css文件

css@media规则,统一css文件可以根据不同分辨率,选择应用不同的css规则

图片要自动缩放,即设置 max-width;100%

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

服务器托管超融合服务器自适应文本自适应文字自适应自适应沉底

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115760.html

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

摘要：请开始清算市面上的电子产品得有百八十种的屏可以供君挑选这其实对在前端一线工作的程序员而言挺灾难的自适应响应式概念解决不同终端的适配问题我们一般有两套方案一是自适应布局二设置响应式布局所谓的自适应就是屏幕变大或是变小它的内容也要做到同步缩放到请开始清算市面上的电子产品,得有百八十种的屏可以供君挑选....这其实对在前端一线工作的程序员而言挺灾难的....showImg(https://...

godruoyi 2019-08-05 18:02 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

rockswang 2019-08-20 14:45 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

dockerclub 2019-08-30 15:53 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

Ilikewhite 2019-08-01 16:24 评论0 收藏0
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

摘要：我的博客原文地址原文地址如果文章对您有帮助，您的是对我最好的鼓励简要介绍前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询百分比和等。在端，通常认为中所表示的真实长度是固定的。我的博客原文地址：原文地址如果文章对您有帮助，您的star是对我最好的鼓励～简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百...

PAMPANG 2019-08-05 14:21 评论0 收藏0