web移动端布局

最新推荐文章于 2022-12-08 21:21:15 发布

oJuePeiLian

最新推荐文章于 2022-12-08 21:21:15 发布

阅读量177

点赞数

文章标签：前端 css 移动开发

本文链接：https://blog.csdn.net/oJuePeiLian/article/details/123153358

版权

web移动端布局

1.基础准备

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

*{
    margin:0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
input{
    -webkit-appearance: none;
}
img,a{
    -webkit-touch-callout: none;
}
body{
    width: 100%;
    max-width: 1080px;
    min-width: 320px;
    margin: 0 auto;
    background-color: #f6f6f6;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    font-family: -apple-system,Helvetica,sans-serif;
}

2.流式布局

主体宽度设为100%；元素根据实际情况调整百分比

3.flex布局

父元素设置为display：flex；并在父元素进行相应设置，子元素按需填写flex：1或者flex：50%；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
     
      width: 600px;
      height: 400px;
      background-color: pink;
      display: flex;
      /*盒子方向，默认从左往右，默认为row*/
      /*flex-direction: row;*/
      /*翻转*/
      /*flex-direction: row-reverse;*/
      /*从上往下*/
      /*flex-direction: column;*/
      /*从下往上*/
      /*flex-direction: column-reverse;*/

      /*设置主轴上子元素排列方式，默认flex-start左对齐*/
      /*justify-content: flex-start;*/
      /*flex-end右对齐*/
      /*justify-content:flex-end;*/
      /*center居中对齐*/
      /*justify-content: center;*/
      /*space-around平分剩余空间*/
      /*justify-content: space-around;*/
      /*space-between两头贴边再平分*/
      /*justify-content: space-between;*/

      /*flex默认不换行，所有子元素排列在一行，会调整子元素的宽度*/
      /*flex-wrap: nowrap;*/
      /*wrap换行*/
      /*flex-wrap: wrap;*/

      /*align-items:center侧轴居中*/
      /*align-items: center;*/
      /*stretch拉伸,子元素不能设置高度*/
      /*align-items: stretch;*/

      /*当盒子出现换行时，可以使用align-content，实现两行盒子贴边对齐等*/
      /*flex-wrap: wrap;
      align-content: space-between;*/

    } 
    div span{
     
      width: 150px;
      height: 150px;
      background-color:blue;
    }
  </style>

最低0.47元/天解锁文章

oJuePeiLian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web移动端布局

web移动端布局1.基础准备<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">*{ margin:0; padding: 0; -webkit-tap-highlight-color: transparent;}input{ -webkit-appearance
复制链接

扫一扫