移动Web开发之rem+flexible,bootstrap方案

317 阅读6分钟

1.rem

  • 兼容性:目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。

2.rem使用方法

  • rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;

3.meta引入

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
属性名取值描述
width正整数定义布局视口的宽度,单位为像素
height正整数定义布局视口的高度,单位为像素,很少使用
initial-scale[0,10]初始缩放比例,1表示不缩放
minimum-scale[0,10]最小缩放比例
maximum-scale[0,10]最大缩放比例
user-scalableyes/no是否允许手动缩放页面,默认值为yes


其中我们来看width属性,在移动端布局时,在meta标签中我们会将width设置称为device-width,device-width一般是表示分辨率的宽,通过width=device-width的设置我们就将布局视口设置成了理想的视口。

3.媒体查询

  • 语法规则:

image.png

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

  • 上述代码写了一个常见的区间范围:

分别对分辨率在0~320px,320px~550px,550px~768px以及768px~960px的屏幕设置了不同的背景颜色。

4.rem+媒体查询实现动态元素大小变化

<style>
      * {
          margin: 0;
          padding: 0;
      }
      
      @media screen and (min-width:320px) {
          html {
              font-size: 50px;
          }
      }
      
      @media screen and (min-width:640px) {
          html {
              font-size: 100px;
          }
      }
      
      .topbar {
          height: 1rem;
          font-size: .5rem;
          background-color: aqua;
          color: gray;
          line-height: 1rem;
          text-align: center;
      }
  </style>
</head>

<body>
  <div class="topbar">
      购物车
  </div>
</body>
  • 注意:如果需要引入不同的css文件,这种方式需要用link标签来引入。 <link rel="stylesheet" herf="XXX.css" media="screen and (min-width:320px)">
  • 拓展: less可以实现嵌套语法,定义语法,加减乘除语法

5. rem+XXX响应式布局方案

image.png

5.1 动态设置html font-size的值

image.png

5.2 元素大小的取值方法

image.png

image.png

5.3 苏宁移动端首页实战

image.png

5.3.1搭建文件夹结构

image.png

5.3.2 设置视口标签和引公共样式表

image.png

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性解释说明
width宽度设置的是viewport,可以设置device-width特殊值
initial-scale初始缩放比,大于0的数字
maximum-scale最大缩放比,大于0的数字
minimum-scale最小缩放比,大于0的数字
user-scalable用户是否可以缩放,yes或no(1或0)
5.3.3 设置公共的common.less

image.png

// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
    text-decoration: none;
}
// 一定要写到最上面
html {
    font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}
  • 在一个less文件中引入另一个less文件,用@import "common"语法

image.png

5.3.4 编码
  1. body 样式

image.png

  1. 整体宽度此时为15rem,15rem * 50px = 750px,让后根据屏幕尺寸让他去自适应

  2. 盒子的高度根据公式来算: 页面元素rem的计算方式:页面元素的px值 / html 字体大小 50px

  • 顶部搜索框代码 image.png

image.png

  • 左边固定,右边固定,中间自适应

左边设置宽高,在进行rem计算,右边设置宽高,中间flex:1就可以实现一个布局

    <!-- 顶部搜索框的结构 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="厨卫保暖季 哒哒哒">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
    
// search-content 的less样式
@baseFont: 50;
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: 88rem / @baseFont;
    background-color:#FFC001;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        // 背景缩放
        background-size: 44rem / @baseFont 70rem / @baseFont;
    }
    .search {
        flex: 1;
        input {
            outline: none;
            width: 100%;
            border: 0;
            height: 66rem / @baseFont;
            border-radius: 33rem / @baseFont;
            background-color:#FFF2CC;
            margin-top: 12rem / @baseFont;
            font-size: 25rem / @baseFont;
            padding-left: 55rem / @baseFont;
            color: #757575;
        }
    }
    .login {
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        line-height: 70rem / @baseFont;
        margin: 10rem / @baseFont;
        font-size: 25rem / @baseFont;
        text-align: center;
        color: #fff;

    }
}
  • nav 5宫格代码
    <!-- nav模块 -->
    <nav>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
    </nav>
    
    
// nav
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        width: 150rem / @baseFont;
        height: 140rem / @baseFont;
        text-align: center;
        img {
            display: block;
            width: 82rem / @baseFont;
            height: 82rem / @baseFont;
            margin: 10rem / @baseFont auto 0;
        }
        span {
            font-size: 25rem / @baseFont;
            color: #333;
        }
    }
}

6. rem + flexible.js完美方案

image.png

  • flexible源码解析
(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

注意:此时body为了有版心,需要设置最大宽度不超过750px

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible 给我们划分了 10 等份 */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}
  • 安装cssrem插件用来进修改当前的cssrem,并且再设置中搜索cssrem进行设置html字体大小,由计算稿得出当前html字体大小为75px(屏幕宽度750px / 划分的分数10)

image.png

7. 移动端其他补充

7.1 二倍图

image.png image.png

7.2 背景缩放和背景二倍图

image.png

image.png

7.3 两款盒模型

image.png

8.Flex伸缩布局

8.1 常见的父项属性

image.png

8.1.1 Flex-direction属性

image.png

8.1.2 flex-wrap属性

image.png

8.1.3 align-times属性

image.png

8.1.3 align-content属性

image.png

8.1.3 flex-flow属性

  • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式, 默认值为row nowrap 总结

image.png

8.2 常见子项属性

8.2.1 Flex属性

image.png

8.2.2 align-self属性

image.png

8.3.3 order属性

image.png

9. Bootstrap实战

9.1 Bootstrap的使用

  • ①创建文件夹结构

image.png

  • ②创建Html结构

image.png

 <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  • ③ 引入相关文件

image.png

  • ④ 书写内容

9.2 布局容器

  • .container类

image.png

  • .container-fluid类

image.png

9.3 栅格系统

  • rem布局是把屏幕划分成等宽的列,而栅格系统是把页面内容container变成等宽的12列。

9.4 栅格系统参数与基本使用

image.png

image.png

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
	</div>
</div>

9.5 栅格系统的列嵌套

image.png

  • 列嵌套的时候注意给子元素加一个.row可以实现清楚默认的父元素的padding

image.png

9.6 栅格系统的列偏移

  • 偏移的份数就是12减去两个盒子的份数 image.png

image.png

image.png

9.7 列排序

image.png

9.8 响应式工具

image.png