记录－交流－Web开发知识分享
在决定根据几个严格的断点做出设计决策之前，请确保考虑屏幕尺寸和浏览器视口的巨大碎片。
在Set Studio，我们进行了一个小小的实验来回答“视口大小的碎片化程度如何？”。我们收集了超过120,000 个数据点以及超过2,300 个独特的视口尺寸。这些数据主要来自美国和欧洲的用户，因此不一定代表全球受众，但对本文仍然有用。
实验只进行了 48 小时，但我们得到的数据非常有趣。让我们深入了解一下。
点击 https://viewports.fyi/ 查看.
…
媒体查询是一种 CSS 语言功能，它允许作者根据正在查看应用程序的设备或窗口的特征有条件地应用 CSS 规则。最常见的是，这些可能是根据视口宽度，允许 CSS 作者创建响应于正在查看的窗口或设备的大小的组件和布局。但这也可能扩展到用户是否喜欢浅色或深色模式，甚至用户的可访问性首选项，以及更多属性。
随着如此多不同的设备类型和屏幕尺寸的兴起，Web 应用程序向用户提供更加定制的视觉呈现并针对其首选交互方法的屏幕尺寸进行优化变得越来越重要。
响应式设计可以通过多种技术的组合来完成，包括有条件地应用 CSS 规则与媒体查询、容器查询，以及根据其所容纳的内容选择灵活的布局（例如 Flexbox 或网格）。在本文中，我们将重点关注媒体查询和响应式布局，但随着浏览器支持长尾的增加，容器查询也需要牢记。截至撰写本文时，它们尚未准备好进入黄金时段，但可用于渐进增强。
移动优先设计是设计和构建响应式 Web 应用程序时可以采用的原则。理想情况下，这种方法应该作为整个过程的所有阶段（从开始到结束）的指导原则。对于设计而言，这意味着线框或 UI 设计的第一次迭代应重点关注移动体验，然后再转向更宽的视口尺寸。
虽然您可以从另一个方向（宽优先）处理 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
近期评论