移动端Web开发技巧-优快云博客

本文介绍移动端Web开发中关键概念如物理像素比、流式布局、精灵图制作等，并讲解了rem单位的应用、媒体查询及响应式布局的设计方法，同时探讨了Bootstrap框架在布局中的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端

二倍图

3.1物理像素&物理像素比

●物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750* 1334

●我们开发时候的1px不是一定等于1个物理像素的

●PC端页面， 1个px等于1个物理像素的,但是移动端就不尽相同

●一个px的能显示的物理像素点的个数 ,称为物理像素比或屏幕像素比

background-size属性规定背景图像的尺寸

background-size:背景图片宽度背景图片高度;
在这里插入图片描述

特殊样式

在这里插入图片描述

流式布局(百分比布局)

●流式布局, 就是百分比布局,也称非固定像素布局。

●通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

●流式布局方式是移动web开发使用的比较常见的布局方式。

●max-width 最大宽度( max-height最大高度)
●min-width 最小宽度 ( min-height最小高度)

二倍精灵图

5.二倍精灵图做法

●在firework里面把精灵图等比例缩放为原来的一半

●之后根据大小测量坐标

●注意代码里面background-size也要写 :精灵图原来宽度的一半

圣杯布局(两边固定，中间自适应)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            margin: 0 auto;
            display: flex;
            width: 70%;
            height: 100px;
        }
        div:nth-child(1){
            width: 100px;
            height: 100px;
           background-color: red;
        }
        div:nth-child(2){
            flex: 1;
            background-color: green;
        }
        div:nth-child(3){
            width: 100px;
            height: 100px;
            background-color: blue;

        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

css初始化

在这里插入图片描述

背景渐变

在这里插入图片描述

rem

rem单位

rem (root em)是一个相对单位 ,类似于em , em单位，在当前元素设置了font-size时, 以当前元素为参照，当前元素没有设置font-size，则以父元素为参照

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

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

媒体查询

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

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

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

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

●目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
在这里插入图片描述

 /* 屏幕尺寸小于500px时body的背景颜色变为粉色 */
        @media screen and (max-width: 700px){
        body{
            background-color: pink;

        }
        html{
          font-size:50px ;
        }
      }
      @media screen and (min-width: 700px){
        body{
            background-color: greenyellow;
        }
        html{
          font-size:70px ;
        }
      }
      @media screen and (min-width: 1200px){
        body{
            background-color: skyblue;
        }
        html{
          font-size:90px ;
        }
      }
      div{
        font-size:.5rem;
        width: 1rem;
      }

rem适配原理

rem适配方案

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。

2.使用媒体查询根据不同设备按比例设置html的字体大小 ,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。

简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库

我们再也不需要在写不同屏幕的媒体查询, 因为里面js做了处理L

它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。

我们要做的,就是确定好我们当前设备的html文字大小就可以了

比如当前设计稿是750px ,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以里面页面元素rem值:页面元素的px值/ 75

剩余的,让flexible.js来去算
github地址: https://github.com/amfe/lib-flexible

响应式布局

响应式需要一个父级做为布局容器 , 来配合子级元素来实现变化效果。

原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分

超小屏幕(手机,小于768px) : 设置宽度为100%

●小屏幕(平板, 大于等于768px) : 设置宽度为750px

●中等屏幕( 桌面显示器,大于等于992px) :宽度设置为970px

●大屏幕(大桌面显示器 ,大于等于1200px) : 宽度设为1170px

Bootstrap前端开发框架

●中文官网: http://www.bootcss.com/

●官网: http://getbootstrap.com/

●推荐使用: http://bootstrap.css88.com/

Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器, Bootstarp预先定义好了这个类,叫.container它提供了两个作此用处的类。

container类

●响应式布局的容器固定宽度

●大屏(>=1200px) 宽度定为1170px

●中屏(>=992px) 宽度定为970px

●小屏(>=768px) 宽度定为750px

●超小屏 (100%)

container-fluid类

●流式布局容器百分百宽度

●占据全部视口( viewport )的容器。适合于单独做移动端开发

<!-- 响应式布局 -->
    <div class="container login">123</div>
    <!-- 百分比布局 -->
    <div class="container-fluid login">123</div>

Bootstrap栅格系统简介

栅格系统英文为"grid systems" ,也有人翻译为“网格系统”, 它是指将页面布局划分为等宽的列,然后通

过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口( viewport )尺寸的增加,

系统会自动分为最多12列。

Bootstrap里面container宽度是固定的,但是不同屏幕下, container的宽度不同,我们再把container划分为12等份
在这里插入图片描述

<div class="container">
        <div class="row">
              <!-- 如果孩子的份数相 加等于12，则会铺满整个container -->
                  <!-- 如果孩子的份数小 于12，则不会铺满整个container -->
                    <!-- 如果孩子的份数大于12，则多出的那一列会铺另起一行显示 -->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">
            <!-- 列嵌套时最好加一个行div，这样可以取消15px的padding。其宽高也是100%继承父级 -->
            <div class="row">
                <div class="col-md-6">a</div>
                <div class="col-md-6">b</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">4</div>

        </div>

在这里插入图片描述

<div class="container">
        <div class="col-md-4">左</div>
        <!-- col-md-offset是向右偏移，份数是12减去该行剩余的份数 -->
        <div class="col-md-4 col-md-offset-4">右</div>
        <!-- 居中盒子做法 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-4">中间</div>
        </div>
    </div>

在这里插入图片描述

 <div class="container">
        <div class="col-md-4 col-md-push-8">左</div>
        <div class="col-md-8 col-md-pull-4">右</div>
        </div>
    </div>

在这里插入图片描述

<div class="container">
        <div class="row">
            <div class="col-md-4">左<span class="visible-lg">大屏幕下显示</span></div>
            <div class="col-md-4 hidden-md">中等屏幕下隐藏</div>
            <div class="col-md-4">右</div>

        </div>
    </div>