简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 字体单位尺寸、可视窗口大小、表格常用样式、移动端自适应、PC端自适用
Blogger Information
Blog 46
fans 2
comment 0
visits 19136
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
字体单位尺寸、可视窗口大小、表格常用样式、移动端自适应、PC端自适用
P粉314265155
Original
634 people have browsed it

字体大小

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>CSS常用单位</title>
  9.   <style>
  11. .em{
  12.     font-size: 2em;
  13.     color: aqua;
  14. }
  15. .px{
  16.     font-size: 15px;
  17.     color: blue ;
  18. }
  19. .rem{
  20.     font-size: 2rem;
  21.     color: rebeccapurple;
  22. }
  23. .baifen{
  24.     background-color: aqua;
  25.     font-size: 6em;
  26. }
  27. .baifen>.bai {
  29.     font-size: 50%;
  30. }
  31. /* 根元素就是 html = :root */
  32. :root{
  33.     font-size: 8px;
  34.     font-size: 16px;
  35. }
  36. .rot {
  37.     background-color: blue;
  38.     font-size: 2rem;
  39. }
  40. body{
  41.     width: 100vw;
  42.     /* 如果高度不写，高度就是很宽度成比例变化 */
  43.     height: 100vh;
  44. }
  45. .box{
  46.     width: 50vh;
  47.     height: 50vh;
  48.     background-color: brown;
  49. }![](https://img.php.cn/upload/image/568/864/168/1657431142259767.jpg)
  50.   </style>
  51. </head>
  52. <body>
  53.     <!-- 1em =1rem=16px  浏览器默认16px    像素是 默认矩形的框   1英寸=96px   1英寸约等于25.4毫米  1mm=(10/43)px≈0.2325px    43mm≈10px
  54.       1 厘米=0.3937 英寸  1 英寸=2.54 厘米  72像素/英寸=28.346像素/厘米 300像素/英寸=118.11像素/厘米
  55.     -->
  56. <p class="em">我是em单位尺寸 绝对尺寸单位</p>
  57. <p class="px">我是px单位尺寸 绝对尺寸单位</p>
  58. <p class="rem">我是rem单位尺寸</p>
  59. <div class="baifen">
  60.     <p>我是父级尺寸</p>
  61.      <p  class="bai">我是百分比%  我是相对单位，参照父级单位</p>
  62.     </div>
  63. <div class="rot">
  64.    我是根尺寸
  65. </div>
  67. <div class="box">
  68.   我是可视化窗口盒子我是相对单位：vw   高度：  vh
  69. </div>
  71. </body>
  72. </html>

表格常用样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>表格常用的样式</title>
  8.     <style>
  9.         /* 1、添加表格线 border */
  10.         table th,
  11.         table tr,
  12.         table td{
  13.             border: 2px solid rebeccapurple;
  15.         }
  16.         /* 2、折叠表格线     border-collapse: collapse;*/
  17.         table{
  18.             border-collapse: collapse;
  19.         }
  21.        /* 3、表格进行布局设置 */
  22.        table{
  23.         width: 80%;
  24.         /* table  块级元素在父级中的居中 有margin-left   margin-right */
  25.         margin: auto;
  26.         /* 表格内容文字居中 */
  27.         text-align: center;
  28.        }
  29.        table caption {
  30.         font-size: 1.2em;
  31.         /* 增加外边距，远离标题 */
  32.         margin-bottom: 0.6em; 
  33.       }
  35.       table thead {
  36.         background-color: lightcyan;
  37.       }
  39. /* 给上午添加背景 常规方式  .属性名  或者 table tboday .shangwu */
  40.  /* .shangwu{
  41.     background-color: blue;
  42. }  */
  43. /* 简化写法  ,用伪类写 ，可以进行删选、个性化书写
  44. table tbody tr:first-of-type td:first-of-type
  45. 注意空格
  46.   table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  47. */
  48. /* table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{ */
  49.     table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  50.     background-color: firebrick;
  51. }
  52.     </style>
  53. </head>
  54. <body>
  56. <!-- table>caption+(thead>tr>th)+(tbody>tr>td) -->
  57. <table>
  58.     <caption>我是课程表</caption>
  59.     <thead>
  60.         <tr>
  61.             <th>时间</th>
  62.             <th>星期一</th>
  63.             <th>星期二</th>
  64.             <th>星期三</th>
  65.             <th>星期四</th>
  66.             <th>星期五</th>
  68.         </tr>
  69.     </thead>
  70.     <!-- 我是第一个tbody -->
  71.     <tbody>
  72.         <tr>
  73.            <td rowspan="2" class="shangwu">上午</td>
  74.             <td>语文</td>
  75.             <td>数学</td>
  76.             <td>英语</td>
  77.             <td>物理</td>
  78.             <td>化学</td>
  80.         </tr>
  81.         <tr>
  83.              <td>语文</td>
  84.              <td>数学</td>
  85.              <td>英语</td>
  86.              <td>物理</td>
  87.              <td>化学</td>
  89.          </tr>
  90.         </tbody>
  91.          <!-- 我是第二tbody -->
  92.          <tbody>
  93.         <tr>
  94.             <td colspan="6">中午</td>
  96.         </tr>
  97.     </tbody>
  98.          <!-- 我是第三tbody -->
  99.          <tbody>
  100.         <tr>
  101.             <td rowspan="2">下午</td>
  102.             <td>语文</td>
  103.             <td>数学</td>
  104.             <td>英语</td>
  105.             <td>物理</td>
  106.             <td>化学</td>
  108.         </tr>
  109.         <tr>
  111.             <td>语文</td>
  112.             <td>数学</td>
  113.             <td>英语</td>
  114.             <td>物理</td>
  115.             <td>化学</td>
  117.         </tr>
  118.     </tbody>
  119. </table>
  120. </body>
  121. </html>

字体图标

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>字体图标及引入</title>
  8.     <!-- <link rel="stylesheet" href="./iconfont.css"> -->
  9.     <link rel="stylesheet" href="../0708/css/zuoye3.css">
  10. <style>
  13. /* .myicon1{
  14.         font-size: 300px;
  15.         color: red;
  16.         box-shadow: 2px 2px 2px #888;
  17.         border: 1px solid #888;
  18.         background-color: green;
  19.       } */
  20.   /* 可以使用  .myicon进行对图标大小的定义，定义属性参考 文字 注意 里面要有myicon属性  */
  21. </style>
  23. </head>
  24. <body>
  25.     <!-- 注意  icon-shouye  是字体图标的名称    另外可从下载的 demo_index.html 打开获取操作指导 -->
  26.     <span id="shouye" class="iconfont icon-shouye myicon1"></span>
  27.     <br>
  28.     首页
  30. </body>
  31. </html>
  1. 注意：引入的css 后面要跟分号，且 在自定义样式的前面，否则不显示
  2. @import '../font_icon/iconfont.css';
  5. /* 2. 自定义图标样式 */
  6. .myicon1{
  7.     font-size: 300px;
  8.     color: red;
  9.     box-shadow: 2px 2px 2px #888;
  10.     border: 1px solid #888;
  11.     background-color: green;
  12. }

响应式/移动端布局基础：媒体查询

1、按钮随着 根属性变化

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>响应式/移动式基础布局：媒体查询</title>
  8. <style>
  9. :root{
  10. /* 设置根字号的尺寸 */
  11. font-size: 20px;
  12. /* 等于1.6rem */
  13. }
  14. button{
  15.     background-color: blue;
  16.     color: aqua;
  17.     border: none;
  18.     /* outline: 1.875rem; */
  19.     /* border: none;   没有边框，背景 */
  20.      outline: none;
  21. }
  22. /* :hover  鼠标悬停的基本样式 */
  23. .bin:hover{
  24.     /* cursor: pointer; 鼠标变成一个小手 */
  25.     cursor: pointer;
  26.     /* opacity 选择后的背景透明度变化 80% */
  27.     opacity: 0.8;
  28.    /* 缓冲过度  注意后面跟着秒数*/
  29.    transition: 0.5s;
  32. }
  33. .small{
  34.     /* 小按钮  可以用字体大小调节按钮大小.,按钮默认尺寸是 13.333333 */
  35.     font-size: 1.5rem;
  36.     /* px是绝对值不能用在媒体查询中 往后不要用了 ,在跟字体设置，用rem表示尺寸
  37.     ，修改 root 根字体后，这些按键就会动态改变 */
  38. }
  39. .middle{
  40.     font-size: 0.6rem;
  41. }
  42. .large{
  43.     font-size: 2.5rem;
  44. }
  45. </style>
  46. </head>
  47. <body>
  49.     <!-- 媒体、打印机、PC端屏幕显示长宽高等 -->
  50. <!-- 布局前提条件：假设布局固定宽度，高度随着内容自动增长 -->
  52. <!-- 用户使用的布局也是这样的，宽度固定，高度随内容增长
  53. 不会在无限空间进行操作,因为无限空间不能布局
  54. -->
  55. <button class="bin small">提交</button>
  56. <button class="bin middle">重置</button>
  57. <button class="bin large">返回上一页</button>
  61. </body>
  62. </html>

2、移动端按钮随着 屏幕大小变化属性变化

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>移动式基础布局-自适应</title>
  8. <style>
  9. /* html { */
  10. /* 设置根字号的尺寸 */
  11. /* font-size: 20px; */
  12. /* 等于1.6rem */
  13. /* } */
  14. html {
  15.         /* 根字号 */
  16.         /* 为了计算方便: 把根字号设置为 10px  */
  17.         font-size: 10px;
  19.         /* 10px = 1rem; */
  20.       }
  21. /* button{
  22.     background-color: blue;
  23.     color: aqua;
  24.     border: none; */
  25.     /* outline: 1.875rem; */
  26.     /* border: none;   没有边框，背景 */
  27.      /* outline: none;
  28. } */
  29. /* :hover  鼠标悬停的基本样式 */
  30. /* .btn:hover{ */
  31.     /* cursor: pointer; 鼠标变成一个小手 */
  32.     /* cursor: pointer; */
  33.     /* opacity 选择后的背景透明度变化 80% */
  34.     /* opacity: 0.8; */
  35.    /* 缓冲过度  注意后面跟着秒数*/
  36.    /* transition: 0.5s; */
  39. /* }
  40.  */
  42.  .btn {
  43.         background-color: seagreen;
  44.         color: white;
  45.         border: none;
  46.         outline: none;
  47.       }
  48. /* .small{ */
  49.     /* 小按钮  可以用字体大小调节按钮大小.,按钮默认尺寸是 13.333333 */
  50.     /* font-size: 1.5rem; */
  51.     /* px是绝对值不能用在媒体查询中 往后不要用了 ,在跟字体设置，用rem表示尺寸
  52.     ，修改 root 根字体后，这些按键就会动态改变 */
  53. /* } */
  54. /* .middle{ */
  55.     /* font-size: 0.6rem; */
  56. /* } */
  57. /* .large{
  58.     font-size: 2.5rem;
  59. } */
  60. .small {
  61.         /* 小按钮: 12px  */
  62.         /* font-size: 12px; */
  63.         /* px: 绝对值,不能用在媒体查询中 */
  65.         font-size: 1.2rem;
  66.       }
  68.       .middle {
  69.         /* 中等按钮: 16px; */
  70.         /* font-size: 16px; */
  72.         font-size: 1.6rem;
  73.       }
  74.       .large {
  75.         /* 大按钮: 20px */
  76.         /* font-size: 20px; */
  77.         font-size: 2rem;
  78.       }
  82. /* 移动优先：一定要从小屏幕开始写 ,安卓的乱七八遭尺寸都有,苹果的比较同意 */
  84. /* 注意：@media是引入的属性，max-width是最大尺寸，是大于
  85.                                                   min-width是最小的尺寸是不包含的，小于
  86. 随着改变屏幕的尺寸/手持机的类型，按键大小会变化的 */
  87. /* 375px < width < 414px   注意中间用and连接 */
  88. @media (max-width: 374px) {
  89.         html {
  90.           font-size: 12px;
  91.         }
  92.       }
  94.       /* 375px < width < 414px */
  95.       @media (min-width: 375px) and (max-width: 413px) {
  96.         html {
  97.           font-size: 14px;
  98.         }
  99.       }
  101.       /* > 414px */
  102.       @media (min-width: 414px) {
  103.         html {
  104.           font-size: 16px;
  105.         }
  106.       }
  108.       @media (min-width: 600px) {
  109.         html {
  110.           font-size: 18px;
  111.         }
  112.       }
  114. </style>
  115. </head>
  116. <body>
  118.     <!-- 媒体、打印机、PC端屏幕显示长宽高等 -->
  119. <!-- 布局前提条件：假设布局固定宽度，高度随着内容自动增长 -->
  121. <!-- 用户使用的布局也是这样的，宽度固定，高度随内容增长
  122. 不会在无限空间进行操作,因为无限空间不能布局
  123. -->
  124. <button class="btn small">提交</button>
  125. <button class="btn middle">重置</button>
  126. <button class="btn large">返回上一页</button>
  128. </body>
  129. </html>

2、PC端端按钮随着 屏幕大小变化属性变化

```
/ 上面 style 代码增加一下部分。PC端 设置 600 <width< 1200px /
@media (min-width: 600px) and (max-width: 1200px) {
html {

  1.      background-color: hotpink;
  2.     }
  3.   }

``


Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！