企业网站定制开发响应式布局的实现方式（5种）

企业网站定制开发响应式布局 企业网站定制开发是同一页面在不同的屏企业网站定制开发幕上有不同的布局，企业网站定制开发即只需要一套代码使页面适应不同的屏幕。

1、百分比布局 

百分比是相对于 包含块 的计量单位，通过对属性设置百分比来适应不同的屏幕

包含块：

1. 有父元素相对于父元素

2. 无父元素相对于视口

3. 或者继承于父元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title> %和rem 布局</title>
  8.     <style>
  9.       html {
  10.         font-size: 30px;
  11.       }
  12.       .box2 {
  13.         width: 10rem;
  14.         height: 10rem;
  15.         background-color: plum;
  16.       }
  17.       .box {
  18.         width: 80%;
  19.         height: 200px;
  20.         background-color: aquamarine;
  21.       }
  22.       .part {
  23.         width: 80%;
  24.         height: 80%;
  25.         background-color: pink;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="box">
  31.       <div class="part"></div>
  32.     </div>
  33.     <div class="box2"></div>
  34.   </body>
  35. </html>

2、rem布局 

 rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位

           题外： rem和em的对比

                1. rem和em都是相对单位

                2. rem相对于根元素

                3. em相对于父元素

           情景描述：

           1. 设置HTML的根元素的font-size为20px

           2. 设置红色的正方形宽高为2rem

           3. 设置绿色的正方形宽高为40px

           4. 从图中可以看出两个正方形一样宽高

           5. 所以1rem === 根元素字号 === 20px

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>rem布局</title>
  8.     <style>
  9.       html {
  10.         font-size: 20px;
  11.       }
  12.       .r1 {
  13.         width: 2rem;
  14.         height: 2rem;
  15.         background-color: plum;
  16.       }
  17.       .r2 {
  18.         width: 40px;
  19.         height: 40px;
  20.         background-color: aquamarine;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="r1"></div>
  26.     <div class="r2"></div>
  27.   </body>
  28. </html>

 

项目中如何方便的使用的rem呢？

设想一个场景，如果一个元素的宽需要47px,根元素是20px,如果要适应不同的终端，需要转为rem，除以20px得到相应的rem值,很麻烦，那么就需要找一个可以简单计算的数值，下面就是一个方法呦

1. 设想屏幕宽度为750px，设计稿宽度也为750px

2.设置 font-size = 1rem = 屏幕宽度*100/设计稿宽度 = 100px (乘以100的原因，屏幕宽度/设计稿宽度得出的值是1，而浏览器可以接受的最小字号12px，所以乘以100既可以满足浏览器最小字号的要求，也比较好计算)

3. 屏幕宽度不会只是750px，假设屏幕宽度为width(().width可以获取宽度)，在该宽度下的字号为fontSize

4.width/(750*fontsize)=750/(750*100) 

5. 通过上面这个方法可以计算出fontSize的值

 

3 媒体查询 @media screen               

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>@media screen</title>
  8.     <style>
  9.       .box {
  10.         width: 10rem;
  11.         height: 10rem;
  12.         background-color: pink;
  13.         margin-left: 20rem;
  14.       }
  15.       @media screen and (min-width: 1200px) {
  16.         html {
  17.           font-size: 20px;
  18.         }
  19.       }
  20.       @media screen and (max-width: 1200px) {
  21.         html {
  22.           font-size: 10px;
  23.         }
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="box"></div>
  29.   </body>
  30. </html>

4 flex布局  

5、vw 和 vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

单位含义
vw相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vminvw和vh中的较小值
vmaxvw和vh中的较大值

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发