首页_众赢下载-首页

—–首页_众赢下载-首页【zygjb】DIY平台—–如果你和我相同一直在设计网页规划职业，你知道众赢登录页面一件事行将产生，唯一不变的便是改动。大约每10年，咱们作为一个网页设计师干事的方式就会产生根本性的改动，这对于逾越咱们众赢平台网站之前所做的作业至关重要……咱们网站设计用户行将再次跨入下一个阶段。

一、它是怎么开始的——固定屏幕

在千禧年降临之前，咱们首先开始在单一视图屏幕中进行UI规划，这类屏幕在其时最盛行的尺度是640×480。大多数时分，咱们乃至没有考虑让屏幕翻滚，而是在特定区域或文本局部区块中设置了内部翻滚条。

毋庸置疑，其时的大部分网页也是用Flash或HTML创立的，并带有用于布局的表格。那是在智能手机出现之前，跟着事物的开展，咱们众赢下载阅历了第一个向“呼应式”规划的根本改动。咱们现已走了很长一段路，CSS已得到长足的开展，“呼应式”网页规划从2010年开始才真实获得了专有东西。

译文：敞开新时代的呼应式网页规划

二、它现在怎么样——呼应式规划

跟着CSS3的发布，咱们获得了对“媒体查询”（MediaQueries）的拜访权限（译者注：跟着移动互联网的兴起，咱们需求适配多种移动端设备，这就需求用到MediaQueries，即“媒体查询”），此后不久，EthanMarcotte在2009年底创造了“呼应式规划”一词。

十多年来，咱们一直运用“呼应式网页规划”（RWD）创立网页布局，作为一种网页规划办法，仅需依据一种屏幕尺度进行规划，“呼应式”使咱们的规划能够适配各种设备和屏幕尺度。

在前期，当移动电话还不兼容媒体查询或JavaScript时，“移动优先”和”渐进式增强”的概念就成为了十分盛行的办法，其时有许多CSS彻底不受支持。

用咱们今日的话来说呼应式规划，咱们以为页面的布局要适配整个浏览器、屏幕巨细和那些需求投射到整个布局上的限制。当需求规划从桌面端调整为移动设备屏幕所需的尺度时，咱们众赢下载运用“媒体查询”来更改整个页面布局。

三、它的未来是什么——组件驱动

很快，运用这种“呼应式”规划办法或许会被以为与运用表格进行页面布局相同过时——就像咱们在90年代所做的那样。

咱们通过依据viewport（视口）的“媒体查询”获得了许多强壮的东西，但咱们也缺少许多适配的或许性，因为“媒体查询”是一个适用于整个页面的通用处理方案，并且对每个用户来说都相同。咱们缺少呼应“用户需求”的才能，也缺少将“呼应式”款式注入“组件”自身的才能。

当咱们谈到组件时，这儿指的是页面上的“元素”，这些元素能够由其它“元素”的集合组成。

例如卡片、横划卡或引荐模块之类的UI内容，每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成咱们的网页。咱们能够运用globalviewportinformation（全局视口信息）来设置这些组件，但它们仍然无法具有自己的风格。当咱们的规划体系是依据“组件”的而不是依据“页面”的时，这使得它变得愈加困难。

好消息是这个生态体系正在产生改动，并且它正在敏捷改动，这需求咱们进行一些思想改动：考虑怎么规划和定义组件款式以及它们怎么习惯周围环境。

CSS正在不断开展，“呼应式”网页规划的新时代行将到来。从目前的情况来看，自从咱们第一次引入“呼应式网页规划”（RWD）以来，仅仅10多年的时刻，这个生态体系现已准备好迎接CSS产生一些适当大的改动。

让咱们深化研究一下能够等待哪些类型的改动，这会怎么改动咱们的规划办法，以及咱们怎么考虑界面规划。

四、用户能够设置依据个人偏好的“媒体查询”

简略来说，咱们能够等待新的依据偏好的“媒体查询”来帮助咱们更好地“呼应”用户。它们将使咱们众赢下载能够依据用户自己的特定偏好或需求来设定网页款式。这将使咱们能够依据用户的体会偏好来调整用户体会。

这绝不是一个完好的列表，但能给你一些想法，这些依据偏好的“媒体查询”或许包括：

译文：敞开新时代的呼应式网页规划

这些将帮助咱们构建更具活力和个性化的网页体会，专门满足咱们用户的专属需求，尤其是那些希望网站易于拜访的用户。

更进一步说，这些依据偏好的“媒体查询“尊重任何用户现已在操作体系设置的偏好。

举个例子，当用户的操作体系偏好设定为“减少动效”时，他们很或许不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。咱们应先尊重他们的偏好，并为其他人供给“动效增强”的体会。

另一个盛行的媒体查询是@prefers-color-scheme（配色偏好设定），它答应咱们依据用户的偏好和操作体系中的设置将咱们的规划更改为“亮色形式”或“暗色形式”。这不依赖于用户需求手动来更改“暗色形式”，它会自动产生。

译文：敞开新时代的呼应式网页规划

五、“容器查询”为你的规划体系注入新的生命力

CSS中最令人兴奋的新兴范畴之一是“容器查询”（containerqueries），通常也称为“元素查询”。从依据“页面”的“呼应式”规划到依据“容器”的“呼应式”规划的改动对开展“规划体系”的效果价值不容轻视，虽然今日运用它并不安全，但重要的是要了解其开展方向。

简而言之，“容器查询”将答应咱们依据“父级容器”而不是整个页面来设置规则。这意味着任何组件都愈加独立，与现代规划体系保持一致，真实成为“即插即用”模块，能够转移到任何页面或布局，并且无需依据新环境重新考虑一切内容。

“容器查询”为咱们怎么规划、规划和构建特定组件供给了一种愈加动态的办法，因为组件自身具有它的呼应信息。

乃至EthanMarcotte自己也表达了为什么“容器查询”如此重要，咱们应该研究一下。

六、考虑各种形状要素

因为各种“形状要素”（formfactors）的改动和扩展，例如新的屏幕类型，可折叠屏，咱们需求“媒体查询”来考虑这些场景。在这儿说到的一切内容中，请记住，这是最具实验性的，并且只是一项正在进行的作业，仍在测验处理咱们或许遇到的任何复杂问题，一起考虑未来“形体要素”或许会怎么开展。

在可折叠屏场景中，原型中有一些“媒体查询”能够让你定位屏幕跨度以及咱们怎么让内容依据新环境进行适配。例如，你能够在一个屏幕上放置一个收起的侧边栏（或菜单），并答应内容在另一个屏幕上展开并随页面翻滚。

七、为什么咱们需求它？

我知道你在想什么，咱们现已从事网页规划并运用“呼应式”来进行网页规划10余年了。咱们对其适当满意，那么为什么要改动呢？

如果咱们真的以结局视角来看呼应式规划，那么它便是关于个人用户的用户体会规划。咱们正朝着一个与每一位个别用户高度相关的时代迈进。咱们的众赢下载网页体会应该去习惯用户的需求偏好。跟着规划体系的开展以及咱们怎么创立更便携的网页，比如“容器查询”之类的东西将变得十分有意义。

译文：敞开新时代的呼应式网页规划

配图：CSS将依据各个层级来确认用户的最佳体会

考虑到这一点，这意味着咱们现在能够运用依据页面的媒体查（包括跨过屏幕的细微差别）来规划微观布局；运用容器查询的组件规划微观布局；运用依据用户偏好的媒体查询，依据用户独特的偏好和需求定制用户体会。,