前言
Material Design 是 Google 推出的一套设计指南，旨在提供一致、有层次的 UI 设计风格。响应式设计的目标是确保网站在多个设备上都可以良好地呈现，不论是桌面、平板还是手机等移动设备。两者在实际应用中常常搭配使用，本文将介绍 Material Design 和响应式设计的典型搭配案例，并提供相关学习和指导意义。
案例介绍
我们以实现一个简单的登录页面为例，展示 Material Design 和响应式设计的典型搭配案例。登录页面中包含两个输入框（用户名和密码）、一个登录按钮，以及一些其他的辅助信息，如忘记密码、注册账号等。
Material Design 风格
Material Design 风格注重层次和动画效果，可以通过使用一些预定义的组件和动画效果来快速实现。
HTML 代码
-- -------------------- ---- -------
---- ---------- ------------------
---- -------------
---- ------------------
--- --------------------------
---- -------------------
------ ---------------------------
------ ----------- -------------------- --------------
------
---- -------------------
------ --------------------------
------ --------------- -------------------- --------------
------
------- ------------- ---------- ------------------------
------
---- --------------------
-- ------------------
-- -----------------
------
------
------CSS 代码
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ------ ------ ------- ------ -------- ----- -------- ----- --------------- ------- ---------------- -------------- ----------- --- --- --- ------- -- -- ----- - ---------- - -------- ----- --------------- ------- ------------ ------- - ----------- - ----------- ------- ---------- ------- -------------- ----- - ----------- - ------ ----- -------------- ----- - ------------- - ------ ----- -------- ---- ------- ----- -------------- --- ----- ------- -- -- ----- -------- ----- - ---- - ------ ----- -------- ---- ----------- ----- ------- ----- -------------- ----- ----------- --- ---- ----- - ---------- - ---------- ----------- - ------------ - -------- ----- ---------------- ------------- ------------ ------- ----------- ----- - ------------ - - ---------------- ----- ---------- ----- ------ -------- -
响应式设计
响应式设计需要考虑页面在不同设备上的布局和样式，本例中我们将采用 flex 布局和媒体查询来实现。
CSS 代码
-- -------------------- ---- -------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
----- -
------ -----
---------- ------
-------- -----
-------- -----
--------------- -------
---------------- --------------
----------- --- --- --- ------- -- -- -----
-
------ ----------- ------ -
----- -
---------- ------
-
-
---------- -
-------- -----
--------------- -------
------------ -------
-
----------- -
----------- -------
---------- -------
-------------- -----
-
----------- -
------ -----
-------------- -----
-
------------- -
------ -----
-------- ----
------- -----
-------------- --- ----- ------- -- -- -----
-------- -----
-
---- -
------ -----
-------- ----
----------- -----
------- -----
-------------- -----
----------- --- ---- -----
-
---------- -
---------- -----------
-
------------ -
-------- -----
--------------- -------
---------------- -------
------------ -------
----------- -----
-
------------ - -
---------------- -----
---------- -----
------ --------
-
------ ----------- ------ -
------------ -
--------------- ----
-
------------ - -
------------- -----
-
-总结
Material Design 和响应式设计的结合可以为我们的网站带来更加一致、有层次的界面，以及更加灵活、适应不同设备的布局。在实际应用中，我们可以根据自己的需求和场景，选择合适的组件和布局方案，为用户带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7e1b0f6b2d6eab301370f