于UI / UX设计人员而言，要制作一个在每个浏览器上都看起来不错的漂亮网站不是一件容易的事。恐惧始终存在于内部，如果设计在某个愚蠢的浏览器上某个地方可怕地崩溃，该怎么办！多亏了 CSS框架让开发人员的生活变得轻松无极限。哪个框架最适合你？取决于你的特定需求。本文将讨论一些适用于大多数行业开发人员的流行CSS框架。

1. Bootstrap

Bootstrap 是最流行的 HTML、CSS 和 JS 框架，GitHub 上近 14 万的 Star 数就足以说明问题，用于在 Web 上开发响应式、移动优先项目。优点有很多，比如响应式设计，海量资源且简单易学。不过也有人吐槽它稍显臃肿，而且在使用人数太多且不定制化的情况下，容易导致很多网站外观千篇一律。 Bootstrap 5 中也做了一些重大更改，比如随意使用 jQuery 并添加了 RTL 支持，再加上现成的组件和工具类，它是Web开发人员的最佳选择之一。

2.Tailwind CSS

Tailwind无疑是最有潜力的框架，提供了一种基于实用工具的现代方法来构建响应站点。相比其他CSS 框架，Tailwind在可定制这一点上几乎是完胜，适合喜欢自己动手的小伙伴。它有大量的实用工具类，不用编写 CSS 就可以构建现代网站。就是需要通过开发设置来缩小最终 CSS 的大小，因为使用默认值会得到一个很大的 CSS 文件。它还可以快速将样式添加到 HTML 元素中，而且提供了大量的开箱即用的设计样式。

3.Animate.css

它提供了极其丰富的动画效果，可以让你的网站活力四射！

4.Bulma

相比Bootstrap，Bulma 绝对算是后起之秀了，而且其上升势头相当迅猛，这是一个基于 Flexbox 布局模型的纯粹的 CSS 开源框架，Bulma的主要特征有100%响应式设计、模块化、现代化，对其他老牌框架审美疲劳的小伙伴可以试试。

5.Foundation

它是由产品设计公司 ZURB 制作的自适应前端框架，相比其他前端框架，除了拥有丰富的 web 应用框架之外，还有专业的电子邮件框架，而且具备超强的可读性、灵活性和可定制化的特点，使得它成为惠普、亚马逊等诸多大企业的选择，是最先进的响应式前端框架，不过学习难度略高。

6. UIkit

这是一个轻量级且功能丰富的模块化前端框架，响应式设计，统一的 UI 样式和灵活的自定义选项可以帮你们快速搭建美观、简洁且模块化的Web界面。提供了 HTML、CSS 和 JS 组件的全面集合，易于使用，定制和扩展。它还采用移动优先的方法，可拥有从手机、平板电脑到台式机的一致体验。

7.Materialize

它是构建响应式应用和网站的前端框架。它有个中文站，里面一个关于此框架学习的论坛，有兴趣可以在那分享你的学习经验，同时也可以获得更多的技术帮助。

8.Paper Css

它是一个使用 LESS 构建的 CSS 框架，可以搭建出别具一格手写风格的页面。如果你喜欢这种风格可以试试。

有一个最佳的屏幕尺寸可以设计。网站应在不同的浏览器和平台上以所有屏幕分辨率快速响应地进行转换。无障碍。移动友好。首先为您的访客设计。从360×640到1920×1080的设计。

• 适用于1024×768至1920×1080的台式显示器的设计
• 适用于360×640至414×896的移动显示器的设计
• 适用于601×962至1280×800的平板显示器的设计
• 检查百度统计并针对目标受众的最常见分辨率大小进行优化
• 不要设计一种显示器尺寸或屏幕分辨率。屏幕大小和浏览器窗口状态因访问者而异。
• 设计应该响应迅速。使用可转换为当前用户窗口大小的自适应或响应式布局。
• 监控百度站长工具的移动设备友好性和可用性警告

它仍然应该看起来不错，并且在所有尺寸下都可以正常工作，现在我们的建议是建设一个自适应/响应式网站。

针对特定屏幕尺寸优化页面布局的三个主要标准是：

• 网页的初始可见性：屏幕上方是否可见所有关键信息，以便用户无需滚动即可查看？这是在显示多少个项目与每个项目显示多少细节之间的权衡。
• 网页可读性：给定页面宽度，阅读各列中的文本是否容易？
• 网页美学：当元素的大小和屏幕大小合适时，页面的外观如何？是否所有元素都正确对齐？标题是否紧挨着图片等？

可用性准则还建议您考虑所有大小的所有三个条件。检查浏览器窗口的屏幕分辨率为360×640到1920×1080。

在整个分辨率范围内，您的网页在所有条件上的得分都应该很高。

您的页面也应该以更大或更小的尺寸工作，尽管这种极端情况不那么重要。

尽管此类用户当然应该能够访问您的网站，但为他们提供小于设计的外观有时是可以接受的折衷方案。

十大最常见的屏幕分辨率

2020年的前6个月中，对451,027个访客进行了访客分析：

屏幕分辨率测试用户数11920×108088,378（19.53％）21366×76867,912（15.01％）31440×90043,687（9.65％）41536×86432,872（7.26％）52560×144025,954（5.73％）61680×105020,068（4.43％）71280×72015,138（3.34％）81280×80014,007（3.09％）9360×64011,085（2.45％）101600×90010,193（2.25％）

响应式网站模板是一个很好的选择

响应式Web设计：在相同的URL上提供相同的HTML代码，而不管用户的设备（例如，台式机，平板电脑，移动设备，非可视浏览器）如何，但是可以根据屏幕大小来不同地呈现显示。 百度建议使用响应式Web设计，因为它是最容易实现和维护的设计模式。

在当今世界，许多人正在使用手持设备（平板电脑和智能手机）浏览网页，而响应式网站设计（RWD）已经成为解决屏幕尺寸挑战的极有可能的解决方案。

此方法不再使用固定宽度的网站，而是使用CSS样式表中的“媒体查询”来创建一个网站，该网站在大小上响应手持设备的不同视口以及人们使用的较小屏幕。

因此，无论人们使用什么设备来查看您的网站，您都可以为他们提供最完整的体验。

百度首选适合移动设备的网站

如果您想为高竞争力的关键词在百度获得高排名，您就需要一个适合移动设备的网站。

网站对移动设备的友好程度如何影响各种设备对网站的排名效果。如果您为小型企业创建网站，您会知道他们想要一个在百度自然搜索中表现良好的网站。

目前从本质上讲，这意味着网站设计具有响应性并且对移动设备友好，尤其是对于百度而言。

全球桌面屏幕分辨率统计，2019年5月– 2020年5月

作为参考，以下是最近（2020年）记录的当前全球顶级屏幕分辨率的列表：

• 1366×768 – 23.49％
• 1920×1080 – 19.91％
• 1536×864 – 8.65％
• 1440×900 – 7.38％
• 1280×720 – 4.89％
• 1600×900 – 4.01％
• 1280×800 – 3.33％

全球移动屏幕分辨率统计，2019年5月– 2020年5月

• 360×640 – 17.91％
• 375×667 – 7.61％
• 414×896 – 6.52％
• 360×780 – 5.56％
• 360×760 – 5.06％
• 414×736 – 3.74％

全球平板电脑屏幕分辨率统计，2019年5月– 2020年5月

• 768×1024 – 51.98％
• 1280×800 – 7.11％
• 800×1280 – 5.34％
• 601×962 – 4.47％
• 600×1024 – 2.85％
• 1024×1366 – 1.96％

台式机，手机与平板电脑的全球市场份额2019年5月– 2020年5月

1. 手机– 50.48％
2. 台式机– 46.51％
3. 平板电脑– 3.0％

如何设计在每个浏览器和分辨率下看起来都相同的网站？

你不能。不可能将网站设计成在每个浏览器，平台和屏幕分辨率下看起来都一样，所以请避免尝试。

您可以选择不带表格的流畅布局来进行设计，其宽度百分比可以扩展和收缩以适合访问者浏览器的设置，或者您可以考虑研究能够实现相同效果的响应式设计解决方案。

搜索引擎偏爱响应式设计，这对于采用它的人来说是个好消息。移动技术正在兴起-因此，如果要开发一个新网站-您必须从一开始就考虑您的网站对移动设备的友好程度。

在实际编写代码时，我们的目标是使事情简单。从经验中我们知道的是， 对于您而言，确定您的受众及其使用的设备，并从整体上构建适合该受众的网站至关重要，受众也包括搜索引擎。

您的移动网站是否重定向到您网站的另一个URL和版本？

好吧，那不是理想的。实际上，它从未如此。

追溯到今天-一些人使用网站的纯文本版本为不支持其网站元素的用户/浏览器生成内容-试图（通常是徒劳的）使他们的内容更易于访问。

W3C甚至曾经推荐它，我们认为如果其他所有方法都失败了：

为访问者目的而向访问者传递一个URL始终是理想的选择，并且如果您正在考虑创建网站的“移动”版本，则在传递移动或智能手机内容时没有任何区别。

百度可能会在不久的将来对您的移动体验做出主要评价-因此，我们所有人都确实需要意识到我们可能很快会在百度的SERP中看到巨大的变化。

当百度作为“访问者”时，由于搜索引擎的典型URL挑战，通常只提供一个URL甚至更为重要-在前一段时间实施规范链接元素之前就是这种情况。

因此，理想的情况是始终提供一个URL。

百度在这方面给出了建议：“如果您具有“智能手机”内容（我们将其视为普通的Web内容，因为它通常是普通的HTML页面，只是在布局上进行了调整以显示较小的内容），则可以使用rel=canonical指向您的桌面版本。这有助于我们专注于网络搜索的桌面版本。当用户使用智能手机访问该桌面版本时，您可以将他们重定向到移动版本。无论URL结构如何，此方法均有效，因此您无需为智能手机移动网站使用子域/子目录。 然而，更好的方法是使用相同的URL并显示内容的适当版本而无需重定向。”

百度还提供了以下提示，以检查您的网站是否准备好使用移动优先索引，但是从本质上讲，如果您正在为网站使用响应式网页设计模板，则此更改的问题应该很小：

• 确保网站的移动版本还具有重要的高质量内容。这包括文本，图像（带有alt属性）和视频-采用通常的可检索和可索引格式。
• 结构化数据对于用户喜欢的索引和搜索功能很重要：它应该同时在网站的移动版和台式机上。确保结构化数据中的URL已更新为移动页面上的移动版本。
• 元数据应同时存在于网站的两个版本中。它提供有关页面内容的提示，以供索引和投放。例如，确保网站上所有页面的两个版本的标题和元描述都相同。
• 与单独的移动网址（单点网站）相互链接无需更改。对于使用单独移动URL的网站，请在这些版本之间保留现有的链接rel=canonical和链接rel=alternate元素。
• 检查单独的移动网址上的hreflang链接。当使用link rel=hreflang元素进行国际化时，移动URL和桌面URL之间分别进行链接。您的移动URL的hreflang应该指向其他移动URL上的其他语言/区域版本，并且类似地使用hreflang链接元素将桌面与其他桌面URL链接。
• 确保承载站点的服务器有足够的容量来处理可能增加的爬网速度。这不会影响使用响应式网页设计和动态服务的网站，只会影响移动版本位于单独主机上的网站，例如m.example.com。

用户期望向下滚动页面

过去的网页用户通常不需要滚动，但多年来，这种情况已经改变。

因此，在设计时，应考虑如果用户只滚动一个完整屏幕或两个屏幕，可以看到多少内容。超过五个屏幕的长度可能表示您页面上的内容过多。当然，用户希望等待更短的时间来查看更全面的内容。

滚动和初始可见性显然都取决于屏幕尺寸：较大的屏幕在屏幕上方会显示更多内容，并且需要较少的滚动。

对响应式移动网站的更改会导百度带来更多流量吗？

不一定，但是有可能。

与百度优化有关的许多事情–建立一个适合移动设备的网站或多或少可以确保您保持已经获得的访问量，并不一定能为您提供来自百度的更多免费访问量。

百度及其用户再次提高了质量标准，如果您想在更具竞争力的SERP中竞争，这是小企业克服困难的又一个障碍。

从长远来看，这种移动转化仅对您的用户来说是一件好事，但从短期来看，对小型企业的转化率不会产生什么影响，因为通过移动设备获得的转化率通常低于桌面。

百度表示，这种适用于移动设备的算法对SERP的影响更大，随着时间的流逝，我们将发现更多信息。

如何在您的网站上检查重要的移动可用性问题

百度站长工具

您应该能够在百度站长工具中跟踪移动设备错误，并且如果您的网站配置正确，错误会随着时间的流逝而消失。

m：

优先根据自身的字体大小，若没有，向父级寻找字体大小，若父级没有一直找到html声明，若html没有声明，选择默认浏览器的大小fontSize：16px；

.box{ font-size:30px; }
.box p{ font-size:1em; }
//p的大小也就是font-size=30px;,若无box字体大小设置，一直向上寻找，直到最后一层html，
//用户可以更改html声明中字体大小。

rem

相对跟元素html，设置字体大小来定义，ie8之前，不支持（不支持时，在html上声明一个绝对单位，默认html=16px）

默认：1rem=16px
//用户可以根据需要控制页面字体大小

Vh&Vw

vh是height所用的单位，vw是width所用的单位；

vh是把视口水平等分成100份，height=20vh，就是占20份；

可适用于设置全屏的效果；

问：100vw和100%有什么区别？

答：100%是相对于上一层（父盒子）标签，100vw是根据视口宽度计算的。