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

vw+rem移动端响应式布局

程序员文章站 2022-05-21 23:25:24
...

vw+rem移动端响应式布局

使用vw+rem的优势在于元素可以动态适配页面宽度。

  1. <div class="box">Hi bro!</div>

给这个盒子设置一个自适应宽度,我们以iPhone 11 Pro为例,浏览器中我们可以看到模拟器显示的像素比为375*812,也就是我们的布局可视宽度为375px,通常情况下我们为了好计算,把1rem=100px,那么我们就可以计算一下,100vw=375px,1vm=3.75px,100px=375px/3.75,换算一下也就是100px=100vw/3.75;即设置页面根字号为100px就可以写成 :

  1. html {
  2. font-size:calc(100vw / 3.75)
  3. }

然后在设置页面中的字号为16px,就可以写成:

  1. body {
  2. font-size:0.16rem;/*默认字号为16px*/
  3. }

为了直观我们给box加一些样式

  1. .box {
  2. /* box:200px * 50px; */
  3. width: 2rem;
  4. height: 0.5rem;
  5. border: 1px solid chartreuse;
  6. background-color: cyan;
  7. box-sizing: border-box;
  8. display: grid;
  9. place-content: center; /*内容居中*/
  10. }

整体呈现的样式就是如果所示:
vw+rem移动端响应式布局

通常在小于一个最小值后,字体大小就不在变小,以便在小屏幕下也能看清字;
在大于一个最大值后,字体不再变大,以防屏幕太大字无限放大影响页面美观;

  1. @media (max-width: 320px) {
  2. html {
  3. font-size: 85px;
  4. }
  5. }
  6. @media (min-width: 640px) {
  7. html {
  8. font-size: 170px;
  9. }
  10. }

这样限制住字体大小变化的范围。当页面宽度小于320时,字体大小会停在13.6px不再降低,屏幕宽度大于640的时候,字体大小停在27.2px不再增大;

vw+rem移动端响应式布局

vw+rem移动端响应式布局


Grid布局常用参数整理

常用的grid布局属性有(显示网格):

解释 参数
grid-template-rows 把容器切割成几行并设置行高 none,auto,10em,minmax(10em,1fr) grid-template-rows:10em 10em 10em;
grid-template-columns 把容器分为几列并设置列宽 none,auto,10em,minmax(10em,1fr) grid-template-columns: 10em 10em 10em;
grid-row 容器内项目的行实际占位 行起始数/行结束数或行起始数/span 合并行数 grid-row:1/3 or grid-row:1/span 2
grid-column 容器内项目的列实际占位 列起始数/列结束数或列起始数/span 合并列数 grid-column:1/3 or grid-column:1/span 2
grid-area 容器内项目的实际占位 行起始/列起始/行结束/列结束或行起始/span 合并行数/列起始/span合并列数 grid-area:1/1/span 2/span 3

以上属性,我们来实际操作一下

  1. <div class="container">
  2. <div class="item">item</div>
  3. </div>
  1. .container {
  2. width: 30em;
  3. height: 30em;
  4. background-color: lightcyan;
  5. display: grid;
  6. grid-template-columns: 10em 10em 10em;
  7. grid-template-rows: 10em 10em 10em;
  8. }
  9. .container .item {
  10. background-color: lightpink;
  11. }

vw+rem移动端响应式布局

其实以上写法还可以写为:
grid-template-columns: repeat(3, 10em); grid-template-rows: repeat(3, 10em);

grid-template-columns: repeat(3, 1fr); /*自动分配可用区域为3等份*/ grid-template-rows: repeat(3, 1fr)

然后我们利用grid-row和grid-column来移动一下项目

  1. .container .item {
  2. background-color: lightpink;
  3. /* 默认位置 */
  4. /* grid-column: 1/2;
  5. grid-row: 1/2; */
  6. /* 移动到中间 */
  7. grid-row: 2/3;
  8. grid-column: 2/3;
  9. }

vw+rem移动端响应式布局
如果当前项目只占据一个单元格,我们可以省略结束单元格不写,简写为grid-row:2grid-column:2;

让项目跨行占格的写法:
grid-row: 1 / span 2; grid-column: 2 / span 2;

vw+rem移动端响应式布局

用grid-area实现项目的扩展:
grid-area: 1/1 / span 2 / span 3;

vw+rem移动端响应式布局

隐式网格的布局属性:
隐式网格是在网格原本的数量上多出来的部分,隐式网格的列宽和显式网格相等,要单独设置行高。
grid-auto-rows: 10em;
设置项目的排列方向:
grid-auto-flow:row;/*默认是行优先row,列优先为column*/

注意,设置为列优先后,必须要设置隐式列的宽度grid-auto-columns:10em

给容器轨道之间设置间隙:gap:10px;

所有项目在容器中的对齐方式:

解释 参数
place-content 项目在容器中的对齐方式 两个参数:垂直方向 水平方向
  1. place-content: start start;
  2. place-content: end center;
  3. place-content: center center;

剩余空间在项目之间分配

  1. place-content: space-between space-around;/*between左右贴合两边,中间平分*/
  2. place-content: space-around space-evenly;/*around盒子左右两边margin相等,盒子间间距大,evenly剩余空间盒子平分*/
  3. place-content: space-between;/*第二个参数不写时与第一个参数相等*/

项目在单元格中的对齐方式,限定项目大小,必须小于单元格的空间,对齐才有意义

  1. .container > .item {
  2. /* 给项目设置大小 */
  3. width: 4em;
  4. height: 4em;
  5. }
  1. place-items: start end;
  2. place-items: center center;
  3. place-items: center;/*设置一个值时,第二个值等于第一个值*/

还可以为某个项目单独设置单元格内对齐方式,用place-self: end;