我们平时谈论的自适应布局，大多指的就是宽度自适应布局#xF914响应式和自适应的区别首先两种方式解决问题的是不一样的自适应是为了解决如何才能在不同大小的设备上呈现同样的网页 抢首赞 评论 分享 举报。

这就是响应式设计中实现不同屏幕尺寸下布局调整的关键技术#xF6E0#xFE0F响应式设计工具和资源Bootstrap 是最知名的响应式框架之一Pixso 是一款在线UI设计工具，其支持响应式设计并包含许多实用的功能，如元件自动布局样式等等CSS Grid。

前段时间在网上看到了一个老外写的一个HTML5响应式表格效果，它的CSS代码用SASS写的，有许多重复的data属性我们这里改进一下他的代码，解决一下他写的不好的地方要看到本例的响应式表格效果，浏览器要缩放到小于600像素。

1使用百分比控制标签高宽以实现不同分辨率下显示比例的固定，但当分辨率变形到一定程度，或页面内容十分复杂时，仍然会影响到内容的排版 2使用javascript动态修改页面布局样式，对于简单的布局可以自写JS来调整，对于复杂的。

尽量简单的去实现，能不用定位尽量不用，用class别用id 给ul一个宽度 和高度 li也给宽和高 然后左浮动 注ul的宽不能小于li宽度的总和 不然li会掉下来ltbody ltstyle ，a，li，ul margin0 padding。

目前最常见的解决方案作为一般规则，你会在任何响应式网站中发现以下CSS样式1img 2maxwidth 100%3height auto4此代码使用maxwidth100%的设置，以确保图像永远不会超越其父容器的宽度如果父容器的宽度收缩小于。

响应式布局最简单的就是用css3来实现我举一个最简单的例子下面是html代码lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name =quotviewportquot content=quotwidth = devicewidth，initial。

首先需要考虑是全平台适配还是只是移动端适配这里以移动端响应式网站为例，讲述如何制作响应式网页#xF4CF选定基本设计尺寸选定基本设计尺寸，一般以1080为基准确定响应式web设计的应用场景之后，和美工或设计师沟通，之前，一般需要美工出几。