常见的移动端布局

流式布局(百分比布局)

使用百分比、相对单位(如 em、rem)等来设置元素的宽度,使页面元素根据视口大小的变化进行调整。这种方法可以实现基本的自适应效果,但可能在不同设备上显示不一致。

 
DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .box {
      width: 100%;
      height: 200px;
      background-color: #e0e0e0;
      margin-bottom: 20px;
    }

    @media (min-width: 768px) {
      .box {
        width: 50%;
      }
    }

    @media (min-width: 1024px) {
      .box {
        width: 33.33%;
      }
    }
  style>
head>
<body>
  <div class="container">
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
  div>
body>
html>


常见的移动端布局_第1张图片

flex弹性布局(强烈推荐)

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Flexbox Layout Exampletitle>
head>
<body>
  <div class="container">
    <div class="box1">Box 1div>
    <div class="box2">Box 2div>
    <div class="box3">Box 3div>
  div>
body>
html>

/* styles.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 在主轴上均匀分布元素 */
  align-items: center; /* 在交叉轴上居中对齐元素 */
  padding: 20px;
}


.box1{
  background-color: aqua;
  width: 10%;
}
.box2{
  background-color:brown;
  flex: 1;
}

.box3{
  background-color: blue;
  width: 10%;
}

在这里插入图片描述

rem+媒体查询布局

rem基础

rem(root em)是一个相对单位,类似于em,em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如,根元素(html)设置font-size=12px,非根元素设置width:2rem;则换成px表示就是24px。

em相对于父元素的字体大小来说的

rem相对于html元素字体大小来说的

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。

媒体查询

媒体查询(Media Query)是CSS3新语法。

· 使用@media查询,可以针对不同的媒体类型定义不同的样式

· @media可以针对不同的屏幕尺寸设置不同的样式

· 当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

· 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

语法规范:

@media mediatype and|not|only (media feature) {
CSS-Code;
}

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>媒体查询案例背景变色title>
    <style>
        /* 1.媒体查询一般按照从大到小或者从小到大的顺序来 */
        /* 2.小于540px 页面的背景颜色变为蓝色 */
 
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* 3. 540~970 我们的页面颜色改为绿色 */
        @media screen and (min-width: 540px) and (max-width:969px) {
            body {
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为红色 */
        @media screen and (min-width: 970px) {
            body {
                background-color: pink;
            }
        }
        /* 5. screen 还有and必须带上不能省略 */
        /* 6. 我们的数字后面必须跟单位 970px 这个px不能省略 */
    style>
head>
<body>body>
html>
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>媒体查询+rem案例title>
    <style>
        /* 从小到大顺序 */
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
 
        div {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    style>
head>
<body>
    <div>实例div>
body>
html>

响应式布局:bootstrap

引用:
https://blog.csdn.net/xy_is_fhh/article/details/121662703

你可能感兴趣的:(一些总结,css,javascript,css3)