记录－交流－Web开发知识分享
区别：
自适应：需要开发多套界面；
响应式：只需开发一套界面。
1.自适应：
通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。 …
在各种设备上进行设计的两种方法是自适应设计和响应式设计。用最简单的术语来说，响应式设计利用一种布局并调整页面的内容、导航和元素以适应用户的屏幕。响应式设计将重新配置所有设计元素，无论是在台式机、笔记本电脑、平板电脑还是手机上查看。通过自适应设计，可以创建适应用户屏幕尺寸的不同固定布局。与更流畅的响应方法相反，自适应设计采用多种尺寸的固定设计。…
如今，几乎每个新客户都想要他们网站的移动版本。毕竟它实际上是必不可少的：一种设计用于黑莓，另一种用于 iPhone、iPad、上网本、Kindle——所有屏幕分辨率也必须兼容。在接下来的五年中，我们可能需要设计一些额外的发明。疯狂何时停止？当然不会。
在网页设计和开发领域，我们很快就无法跟上无穷无尽的新分辨率和设备。对于许多网站来说，为每个分辨率和新设备创建一个网站版本是不可能的，或者至少是不切实际的。我们是否应该仅仅为了从另一台设备上获得访问者而承受从一台设备上失去访问者的后果？或者还有其他选择吗？…
随着越来越多的移动设备访问互联网，仅仅在计算机屏幕上看起来不错的静态网站设计已经不够了。
更不用说，在进行设计时，您还必须考虑平板电脑、二合一笔记本电脑以及具有不同屏幕尺寸的不同智能手机型号。
厌倦了滚动？下载 PDF 版本，以便于离线阅读和与同事共享。
因此，将您的内容拍打成一列并称之为退出并不会削减它。
通过响应式网页设计，您可以确保您的网站在手机、平板电脑、笔记本电脑和台式机屏幕上看起来最好。
用户体验的改善意味着更高的转化率和业务增长。
本指南将为您提供有关响应式网站设计的所有信息，包括定义、分步演练、示例等。
使用移动设备上网的情况持续以天文数字般的速度增长，而这些设备通常受到屏幕显示尺寸的限制，因而需要采用不同的方法来布局屏幕上的内容。
响应式网页设计最初由 Ethan Marcotte 在《A List Apart》中进行了定义，响应了用户及他们所使用设备的需求。布局会根据设备的尺寸和功能而变化。例如，用户会在手机上看到以单列视图显示的内容，而平板电脑可能会采用两列视图来显示相同的内容。…
网页的设计的样式都由css控制, 我们的css大小单位,一般用 px,或rem,或vw,vh.
由px控制的大小是固定的,不具有响度式的.
响应式设计一般由两种方案实现.
实现方法 :
1.head中加
<meta name="viewport" content="width=device-width, initial-scale=1.0" />(function flexible(window, document) {
function resetFontSize() {
const size = (document.documentElement.clientWidth / 1920) * 37.5;//1920为设计稿宽度
document.documentElement.style.fontSize = size + 'px';
}
// reset root 大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位，而是和web端项目一样，使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢？
最近在研究关于布局的设计方案，通过学习理解阿里的fusion.design的设计思想并结合手机淘宝H5版的px布局问题。逐渐有了一些想法，这里进行综合整理，也算是抛砖引玉吧。…
知识点：
rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。
个人理解rem布局可分为俩种情况无设计稿和有设计稿：
1、首先需要在<head>标签中加入
<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">
对于viewport的详细解释可以参考这篇文章：https://www.cnblogs.com/2050/p/3877280.html
2、在<script>标签中加入
window.onresize = function
近期评论