移动端入门知识点—分栏+布局+媒体查询+单位

三七yiii

已于 2022-03-27 11:00:37 修改

阅读量280

点赞数 4

分类专栏：前端文章标签： css css3 前端 html5 html

于 2022-03-21 21:42:32 首次发布

本文链接：https://blog.csdn.net/m0_65208646/article/details/123645755

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、分栏

1、列宽度

语法：column-width

column-width: 200px;/* 栏宽 列宽 */

2、列数

语法：column-count

column-count: 4;/*栏数 列数 */

3、列间距

语法：column-gap

 column-gap: 20px;
            /* 列间距 */

4、列样式（边框）

语法：column-rule

column-rule: 1px dotted pink;

5、缩写

语法：columns : column-width值 column-count值;

二、自适应布局和响应式布局

1、自适应布局

自适应布局是网页内容根据设备的不同而进行适应；
通过检测视口分辨率，来判断当前访问的设备是pc端、平板还是手机，从而请求服务层，返回不同的页面；
需要根据不同使用场景开发多套界面。

2、响应式布局

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；
通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
只需要开发一套界面即可适用于所有尺寸及终端

三、媒体查询

1、定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2、示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: red;
      transition: 1s;
        }
        @media screen and (max-width:1000px){
        /* 0-1000 屏幕在1000以内时，下列样式起作用 */
        .box{
          width: 200px;
          height: 200px;
          background-color: greenyellow;
        }
      }

        @media screen and (max-width:500px){
          /* 0-500 */
        .box{
          /* 屏幕在500以内时，下列样式起作用 */
          width: 50px;
          height: 50px; 
          background-color: pink;
        }
      } 

      /* @media screen and (max-width:1000px){
        screen可写可不写 不写把and也去掉
        .box{
          width: 200px;
          height: 200px;
          background-color: greenyellow;
        }
        0-1000 如果写在0-500的后面，会覆盖上面五百的样式
         max-width最大宽度，推荐大范围写前面，小范围写后面
      } */


      /* min-width最小宽度  推荐从小往大写*/
      @media screen and (min-width:700px){
          /* 700宽度及以上 */
        .box{
          /* 屏幕宽度在700及以上时，下列样式起作用 */
          width: 300px;
          height: 300px; 
          background-color: green;
        }
      } 

      @media screen and (min-width:1000px){
          /* 1000宽度及以上 */
        .box{
          /* 屏幕宽度在1000及以上时，下列样式起作用 */
          width: 300px;
          height: 300px; 
          background-color: green;
        }
      } 

      
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

四、单位（px em rem）

1、px

px（Pixel) 像素,是相对于显示器屏幕分辨率而言的。
px是一个绝对长度单位，绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。
绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

2、em

相对长度单位指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用。em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。
相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
一般浏览器字体大小默认为16px，则2em == 32px；

3、rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

优点：如响应性、可伸缩性、改进的阅读体验以及在定义组件时更大的灵活性。

举例：

<!--该代码可以使ul中的字体全部变为12px-->
<style type="text/css">
  html {
    font-size: 100px;
  }
  ul {
    font-size: 0.12rem;
  }
</style>

<body>
  <ul>
    <li>示例</li>
    <ul>
      <li> 示例</li>
    </ul>
  </ul>
</body>

三七yiii

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端入门知识点—分栏+布局+媒体查询+单位

一、分栏1、列宽度语法：column-widthcolumn-width: 200px;/* 栏宽列宽 */2、列数语法：column-countcolumn-count: 4;/*栏数列数 */3、列间距语法：column-gap column-gap: 20px; /* 列间距 */4、列样式（边框）语法：column-rulecolumn-rule: 1px dotted pink;5、缩写语
复制链接

扫一扫