这样设计网页的好处 第1篇
之前我们通常是在预处理器里才可以使用变量，而现在 CSS 里也支持了变量的用法。通过自定义属性就可以在想要使用的地方引用它。
自定义属性也和普通属性一样具有级联性，申明在 :root 下的时候，在全文档范围内可用，而如果是在某个元素下申明自定义属性，则只能在它及它的子元素下才可以使用。
自定义属性必须通过 --x 的格式申明，比如：–theme-color: red; 使用自定义属性的时候，需要用 var 函数。比如：
上图这个是使用 CSS 自定义属性配合 JS 实现的动态调整元素的 box-shadow，具体可以看这个 codepen demo。
Retina 显示屏比普通的屏幕有着更高的分辨率，所以在移动端的 1px 边框就会看起来比较粗，为了美观通常需要把这个线条细化处理。这里有篇文章列举了 7 中方案可以参考一下：7种方法解决移动端Retina屏幕1px边框问题,而这里附上最后一种通过伪类和 transform 实现的相对完美的解决方案： 而这里附上最后一种通过伪类和 transform 实现的相对完美的解决方案： 只设置单条底部边框：
同时设置 4 条边框：
一、是什么
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
描述响应式界面最著名的一句话就是“Content is like water”
大白话便是“如果将屏幕看作容器，那么内容就像水一样”
响应式网站常见特点：
二、实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
当视口在375px - 600px之间，设置特定字体大小18px
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片
比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现
百分比
通过百分比单位 _ % _ 来实现响应式的效果
比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
height、width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：
视口单位vw/vh
将视口宽度和视口高度（即layoutviewport）等分为 100 份。 vw : 1vw 为视口宽度的 1% vh : 1vh 为视口高度的 1% vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 和rem相比较，视口单位不需要使用js对根元素进行设置，兼容性稍差，但是大部分设备都已经支持了，同样的无须再开发时进行单位换算，直接使用相关的插件postcss-px-to-viewport在输出的时候进行转换。
与百分比布局很相似，在以前文章提过与%的区别，这里就不再展开述说
可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式
rem 是相对于根元素 html 的 font-size 来做计算，默认情况下浏览器字体大小为16px，此时1rem = 16px。通常在页面初始化时加载时通过对 设置来实现。一般我们将根元素html的font-size设置为宽度的1/10，不同设备的宽度不同，但是同样数值的rem比例与设备的宽度比例是一致的。
在实际项目中我们无须在开发中自己进行转换，可以使用pxtorem在输出的时候将px转换为rem。
可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值，如下：
为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下：
无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局
除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式
小结
响应式设计实现通常会从以下几方面思考：
三、总结
响应式布局优点可以看到：
缺点：
参考阅读：
针对同一个类型的 HTML 标签，不同的浏览器往往有不同的表现，所以在网站制作的时候，开发者通常都是需要将这些浏览器的默认样式清除，让网页在不同的浏览器上能够保持一致。
针对清除浏览器默认样式这件事，在很早之前 CSS 大师 Eric A. Meyer 就干过。它就是写一堆通用的样式用来重置浏览器默认样式，这些样式通常会放到一个命名为 文件中。比如大师的 [17] 是这么写的。
他的这份 据说是被使用最广泛的重设样式的方案了。
这样设计网页的好处 第2篇
上面的示例将我们带入了功能简约的另一个概念。 尽管简约和简单并不总是一回事，但它们应该并驾齐驱。在设计功能简约时，您应该专注于帮助访问者尽快而轻松地完成任务，并且不会分散注意力。 这意味着，与其在屏幕上方或屏幕侧面设置大量页面使您的访问者不知所措，还不如寻找更简单的导航选项。让单个菜单图标可扩展到其项目的完整列表，都还是流行的设计选择，尤其是在移动Web设计时代。 例如，查看上的简单菜单。
5.在屏幕顶部进行设计功能极简主义还可以帮助设计师更快地吸引访问者的注意力。 设置在页面顶部的部分为访问者显示的内容是鼓励他们进行更深入浏览的第一步。我们确保您所提供的内容可以使您的访问者保持他们的兴趣并为提供他们所需要的信息。 这样，您可以降低客户跳出的风险，同时还可以利用极简主义为受众提供快速访问信息的能力。 网站在其页面顶部设置着引导访问者使用其网页各个功能的按钮。
通过使用体验良好的UI动画，您可以在页面顶部的一个块中提供更多信息，且不会造成界面环境混乱。
6.在正确的位置使用功能极简主义请记住，功能极简主义不仅限于主页。 根据您要为客户完成的工作，您还可以将极简主义的组件嵌入登录页面和压缩页面中。 当页面上的信息井井有条时，访问者更有可能滚动到页面底部并完成跳转。例如，的登陆页面。
该页面为受众提供有用的信息，并准确告诉客户下一步需要做什么。没有混乱，鲜有复杂性，也没有任何阻碍访客的因素。 请注意。尽管在功能上的极简主义可能非常有用，但并不是每个网站都适合。缺少视觉元素可能对严重依赖自身内容的网站有害。这是因为信息密度低会迫使您的用户过度滚动其所需的内容。正确使用极简主义需要仔细评估该技术是否适合当_页内容。
关于设计和艺术的公众号：设计赏
参考了设计师 Rebekah Carter
译 sSs摩天轮
这样设计网页的好处 第3篇
除了尝试视觉和声音之外，创建完美的网站还需要做更多的工作。设计师需要仔细考虑其网站的每个元素如何影响整体用户体验。
毕竟，随着数十亿个网站可供探索，要说服客户的听众相信他们应该留在页面上，就需要真正使人身临其境的感觉。您的网站越方便和有吸引力，访问者就越有可能会停留在周围。 极简主义是近几年来最受欢迎的Web设计风格之一，有时可以帮助设计师使有吸引力且有效的网站更具功能性。页面上的混乱和混乱越少，浏览起来就越容易。 那么，您如何拥抱功能极简主义的好处？