欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

响应式布局

程序员文章站 2022-05-29 12:47:35
...

响应式布局:媒体查询

响应式布局的最大特点就是随着设备屏幕的大小改变,页面布局发生改变。
而我们一般的布局前提是宽度受限而高度不受限的空间。
以下,我们一PC端布局为例,进行响应式布局的解析:
首先页面中有三个按钮

  1. <button class="btn small">按钮1</button>
  2. <button class="btn middle">按钮2</button>
  3. <button class="btn large">按钮3</button>
  4. <style>
  5. /* 小按钮 */
  6. .btn.small {
  7. font-size: 1.2rem;
  8. }
  9. /* 中按钮 */
  10. .btn.middle {
  11. font-size: 1.6rem;
  12. }
  13. /* 大按钮 */
  14. .btn.large {
  15. font-size: 1.8rem;
  16. }
  17. </style>
如何实现随着浏览器窗口的大小变化而按钮的大小也发生变化呢?
  • 我们先设置页面的默认文本大小为16px;(不设置的话,默认就是16px);
  1. html {
  2. font-size: 16px;
  3. }
  • 当屏幕大小小于1366px的时候,我们规定他的字体变小,为13.66px;
  1. @media (max-width 1366px) {
  2. html {
  3. font-size:13.66px;
  4. }
  5. }

响应式布局

  • 当屏幕大小大于1920px时,我们规定他的字体变大,为19.2px;
  1. @media (min-width : 1920px){
  2. html {
  3. font-size:19.2px;
  4. }
  5. }

响应式布局

  • 当屏幕大小介于1366到1920px之间时,我们设置他的根文本字号为18px;
  1. @media (min-width:1366px) and (max-width:1919px) {
  2. html {
  3. font-size:18px;
  4. }
  5. }

响应式布局

综上,我们可以总结一下响应式布局的写法,首先基本语法是@media开头,有两种写法:@media only screen and (max-width:XXXpx)=@media (max-width:XXXpx);
其中的max-width的含义为当屏幕宽度小于XX值的时候,min-width的含义为当屏幕宽度大于XX值的时候。即画一条轴来表示:
响应式布局

利用固定定位,写一个登录的蒙层

首先分析一下需求,我们需要一个登录页面的蒙层,那么势必是有一个原始页面,然后点击登录按钮之后,触发蒙层页面显示。
响应式布局
那么我这写了一个很简单的原始页面,有个头部,头部有个登录按钮,然后有一些简单的样式

  1. <header>
  2. <h1 class="title">霍格沃兹魔法学院</h1>
  3. <button onclick="document.querySelector('.modal').style.display='block'">
  4. 登录
  5. </button>
  6. </header>
  7. <style>
  8. /* 初始化 */
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. body {
  15. background-image: url('images/bg.jpg');
  16. }
  17. header {
  18. background-image: url('images/mao.jpg');
  19. background-size: 100% 100%;
  20. padding: 0.5em 1em;
  21. display: flex;
  22. }
  23. header .title {
  24. font-weight: lighter; /*设置文本的粗细,normal默认,bold加粗,bolder更粗的,lighter更细的,或数字*/
  25. font-style: italic; /*设置文本样式,normal默认,italic斜体,oblique倾斜的*/
  26. color: azure;
  27. text-shadow: 1px 1px 1px #555; /*文本阴影效果 水平阴影位置,垂直阴影位置,模糊距离,颜色*/
  28. letter-spacing: 1px; /*设置h1,h2字母间距*/
  29. }
  30. header button {
  31. margin-left: auto;
  32. width: 5em;
  33. border: none;
  34. border-radius: 0.5em;
  35. }
  36. header button:hover {
  37. background-color: blueviolet;
  38. color: white;
  39. cursor: pointer; /*圆角*/
  40. box-shadow: 0 0 10px white;
  41. transition: 0.3s;
  42. }
  43. </style>

重点来了,写一个登录表单,在页面点击登录的时候跳出来

  1. <!-- 模态框表单 -->
  2. <div class="modal">
  3. <div
  4. class="modal-bg"
  5. onclick="this.parentNode.style.display='none'"
  6. ></div>
  7. <form action="a.php" method="post" class="modal-form">
  8. <fieldset style="display: grid; gap: 1em;">
  9. <legend>用户登录</legend>
  10. <input type="email" name="email" placeholder="email@email.com" />
  11. <input type="password" name="password" placeholder="******" />
  12. <button>登录</button>
  13. </fieldset>
  14. </form>
  15. </div>
  1. /* 模态框表单 */
  2. .modal .modal-form fieldset {
  3. background-color: lightcyan;
  4. border: none;
  5. padding: 2em;
  6. box-shadow: 0 0 5px #888;
  7. }
  8. /* 模态框表单标题 */
  9. .modal .modal-form fieldset legend {
  10. padding: 5px 1em;
  11. background-color: rebeccapurple;
  12. color: white;
  13. }
  14. .modal .modal-form {
  15. /* 固定定位 */
  16. position: fixed;
  17. /* 顶部留出预留 */
  18. top: 15em;
  19. /* 左右相等,把表单放正中间 */
  20. left: 20em;
  21. right: 20em;
  22. }
  23. .modal .modal-bg {
  24. position: fixed;
  25. /*全部铺满*/
  26. top: 0;
  27. left: 0;
  28. right: 0;
  29. bottom: 0;
  30. background-color: rgb(0, 0, 0, 0.5); /*0.5透明度*/
  31. }
  32. .modal {
  33. display: none;
  34. }

那么来看一下神奇的效果吧
响应式布局

flex布局

定义一个flex布局的容器:
display:flex
flex容器中的子元素被称为弹性项目或flex项目
flex容器上只要记住三个属性就可以了:
flex-flow:主轴方向 换行,例:flex-flow:row nowrap(不换行【wrap为可换行】)

place-content:项目在主轴上的排列和剩余空间的分配
【值:start起始边对齐,end结束边对齐,center居中对齐,space-between两端对齐,space-around分散对齐,space-evenly平均对齐】

place-items:项目在交叉轴上的对齐方式
【值:stretch如果子项加起来的尺寸小于对齐容器的尺寸,则任何未尺寸为 auto 的项将增加同等的大小(不是按比例),但也会受到 max-height/max-width (或等同的功能)的限制,因此所有项刚好能填满对齐容器;start:起始边对齐;end:结束边对齐;center:居中对齐】

flex容器上的flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。
flex:放大因子 收缩因子 计算宽度

参数 备注
放大因子(flex-grow): 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
收缩因子(flex-shrink): 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
计算宽度(flex-basis): 项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。
auto = 1 1 auto
none = 0 0 auto
initial = 0 1 auto (默认值)
inherit 从父级继承

另外flex的项目上还可以设置order属性,order=0的时候是默认值,order=1的时候会往后排,order=-1会往前排,也就是order越小越靠前!