移动端WEB开发流式布局

1. 视口（屏幕区域）

定义：浏览器显示页面内容的屏幕区域，可分为布局视口、视觉视口和理想视口

  • 布局视口（layout viewport）：解决早期PC端在手机显示的问题，分辨率980px，需要手动缩放页面

  • 视觉视口 （visual viewport）：用户正在看到的网站的区域

  • 理想视口（ideal viewport）：自适应，网站在移动端最理想的浏览和阅读宽度设定，即布局视口的宽度与理想视口的宽度一致，需要手动添加meta视口标签通知浏览器操作

1.1 meta视口标签

content属性：

属性 解释说明 标准值
width 设置viewport宽度，特设定device-width特殊属性值（自适应理想视口） device-width
initial-scale 初始缩放比，大于0的数字 都为1.0
maximum-scale 最大缩放比，大于0的数字 都为1.0
minimum-scale 最小缩放比，大于0的数字 都为1.0
user-scalable 用户是否可以缩放，yes/1或no/0 no(0)

1.2 标准viewport设置

  • 视口宽度和设备保持一致

  • 视口默认缩放比例1.0

  • 不允许用户自行缩放

  • 最大允许的缩放比例1.0

  • 最小允许的缩放比例1.0

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

2. 二倍图

2.1 物理像素比

  • 物理像素/分辨率（pixel）：物理真实存在的屏幕显示的最小颗粒，出厂商设定好，比如苹果6/7/8是750*1334。

  • 物理像素比（设备像素比dpr）：1px能显示的物理像素点个数；
    同一方向上的物理像素/CSS像素（缩放比为1.0时）

    PC端页面1px=1物理像素，但移动端不同：width=375px的盒子在ipone8占满750px宽度，其开发尺寸1px=物理像素点2个

  • 视网膜屏幕（Retina）：一种显示技术，将更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，增强细腻程度和显示效果

    因为视网膜屏幕将原来的1个像素点增大x倍，原图在手机放大会导致模糊，则需要原图像素增加x倍，但大小不变，则在手机上显示时，就可以正常显示。

2.2 x倍图

先放大x倍，再缩放到原来的一半，即开发尺寸不变，分辨率增加,就相当于视网膜屏幕（手机尺寸不变，分辨率增加），显示效果不变

例如一张50×50的图片和一张100×100的图片（两张图要清晰图相同哈），将100×100的图片的长宽都设置为50px，这样的两张图，后者更清晰

3. 移动端技术解决方案

  • 移动端浏览器

    • 基本以webkit内核为主，只需考虑webkit兼容性问题，浏览器私有前缀只需要考虑添加webkit

    • 放心使用H5标签和CSS3样式

  • CSS初始化（normalize.css）：保护有价值的默认值、修复浏览器bug、模块化、有详细文档可查阅，https://github.com/necolas/normalize.css

3.2 特殊样式

  • CSS3盒子模型（box-sizing）：-webkit-box-sizing：border-box;

  • 去除移动端链接点击背景高亮：-webkit-tap-highlight-color:transparent;

  • 去除浏览器默认外观样式（才能后续给button和input自定义样式）：-webkit-appearance:none；

  • 禁用长按页面时的弹出菜单：

 img，a 
     { 
        -webkit-touch-callout：none；
     }

4. 移动端常见布局

4.1 流式布局（百分比布局）

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

  • min-width：280px：最小宽度为280px，小于则不缩放。

  • max-width：1280px：最大宽度为1280px，大于则不缩放。

4.2 flex布局

详情可见：：https://www.cnblogs.com/mtdj/p/16256154.html ->伸缩布局

4.3 rem适配布局

适用条件（媒体查询+rem实现元素动态大小变化）：

  • 页面文字大小随屏幕大小变化而变化

  • 流式布局和flex布局主要针对宽度布局，rem可设置高度

  • 实现屏幕变化时，元素高度和宽度等比例变化

4.3.1 rem基础

  • rem单位（root em）：相对单位，类似于em，em相对父元素字体大小；但rem的基准是相对于html元素的字体大小。

  • 例子：根元素（html）设置font-size=12px；非根元素width：2rem；则换算为24px

  • rem优点：可以通过修改唯一的html元素的文字大小，调整使用rem的元素大小，实现整体控制

4.3.2 媒体查询

媒体查询（Media Query）是CSS3新语法，目的是通过查询是否满足媒体条件，进而设置样式。为了防止混乱，媒体查询一般按照从小到大的顺序来写，这样代码更简洁（CSS的层叠性）

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

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

  • 重置浏览器大小过程中，页面会个根据其宽度和高度重新渲染页面

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

样式：

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

  • 查询类型 mediatype

    将不同终端设备划分为不同的类型，称为媒体类型

    值 说明
    all 用于所有设备
    print 用于打印机和打印预览
    screen 用于电脑屏幕、平板电脑、智能手机等

  • 关键字 and|not|only

    关键字将media type或多个media feature连接到一起作为媒体查询的条件

    值 说明
    and 将多个媒体特性连接到一起
    not 排除某个媒体类型，可省略
    only 指定媒体类型，可省略

  • 媒体特性 (media feature)

    每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂时了解3个，注意要加小括号

    值 解释说明
    width 定义输出设备页面可见区域的宽度
    min-width 定义输出设备中页面最小可见区域宽度（包含等于）大于等于值
    max-width 定义输出设备中页面最大可见区域宽度（包含等于）小于等于值

例：当屏幕尺寸不超过800px时，设置body背景色为pink

        @media screen and (max-width:800px) {
            body {
                background-color: pink;
            }
        }
引入资源（理解）

当样式比较繁多时，可以针对不同媒体使用不同的css样式表。原理就是在link中判断设备尺寸，然后引入不同的css文件

<link rel=“stylesheet” href=“style320.css” media=“screen and (min-width:320px)”>

5. less

一门CSS预处理语言，扩展CSS的动态特性

  • Less（Leaner Style Sheets）：一门CSS扩展语言，也称为CSS预处理器。作为CSS的一种形式的扩展，并没有减少CSS功能，而是在现有CSS语法上，为CSS加入程序式语言特性。

  • 在CSS语法基础上，引入变量、Minxin（混入）、预算、函数等功能，大大简化CSS编写，并降低维护成本，Less更少代码做更多事

  • Less中文网址：http://lesscss.cn/

  • 常见CSS预处理器：Sass、Less、Stylus

5.1 Less变量

@变量名:值;

@color:pink //定义一个粉色的变量
//引用变量
body{
    background-color: @color;
}

  • 变量名不能包含特殊字符、不能数字开头、大小写敏感

  • 使用场景：主题色，比如通用颜色、样式、字体大小方案

5.2 Less嵌套

  • 子元素的样式直接写到父元素里即可

      <div class="header">
        <a href="">文字</a>
    </div>

    less：

    .header {
    width: 200px;
    height: 200px;
    background-color: pink;
    a {
        color: red;
    }
}

  • 针对交集|伪类|伪元素选择器，

    • 若内层选择器前没有&，则被解析为父选择器的后代；

    • 有&解析为父元素自身或父元素的伪类

        a {
        color: red;

        &:hover {
            color: antiquewhite;
        }
    }

5.3 Less运算

任何数字、颜色或者变量都可以参与运算，Less提供+ - * / 算术运算，运算结果更新到css文件中

@border: 5px + 50; //可直接进行运算

div {
    width: 200px + 50;
    height: 200px * 2;
    border: @border solid pink;
}

注意：

  • 运算符左右空格隔开 1px + 5，
  • 但对于2个不同单位值运算结果取第一个值的单位
  • 只有一个单位则取该单位

6. rem实际开发适配方案

6.1 技术方案1

  • 一般情况下，设计1-2套效果图适应大部分屏幕，现基本以750px为主

  • 选一套标准尺寸以750px为主

  • 用屏幕尺寸 /划分份数（一般是15、10、20份数）= html文字大小，所以不同屏幕得到不同字体大小

  • 页面元素rem值 = 页面元素本身px / html字体大小

6.2 技术方案2

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

  • 定义：终端设备适配的解决方案，可以在不同的终端设备实现页面适配，
    是一个适配移动端的javascript框架。根据设备尺寸不同，设置html字体大小，使用rem作为样式单位

  • 原理：将当前设备划分为10等份，只需要确定当前设备的html文字大小即可，让flexible.js页面元素计算rem值，
    当屏幕尺寸大于750px时，使用媒体查询将html的文字大小固定为 75px！important（提高权重）

步 骤：

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

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

  • 我们要做的，就是确定好我们当前设备的 html 文字大小就可以了，
    比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px（750 / 10）就可以

  • 里面页面元素 rem 值：页面元素的 px 值 / 75

  • 剩余的，让 flexible.js 来去算

可以参考别人的笔记：https://blog.csdn.net/weixin_42214698/article/details/122573541

响应式布局

  • 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的（PC、移动端、pad端）

  • 响应式需要一个父级作为布局容器（container），来配合子级元素来实现变化效果。

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

  • 超小屏幕（手机，小于768px）：设置宽度为100%

  • 小屏幕（平板，大于等于768px）：设置宽度为750px

  • 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px

  • 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

例：响应式导航栏
当屏幕宽度小于787px时，导航栏中的li从全在一行变为一行三个

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        .container li {
            float: left;
            width: 93.75px;
            height: 30px;
            line-height: 30px;
            background-color: green;
        }

        /* 媒体查询 */
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }

            .container li {
                width: 33.33%;
            }
        }
    </style>

    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>

Bootstrap

基于html、css、JavaScript，简洁灵活，使得web开发更加快捷，由于控制权在框架本身，使用者要按照框架规范的某种规范进行开发

使用步骤：

  • 创建文件夹结构

  • 创建html骨架结构

<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- [if It IE 9] -->
        <!-- 解决IE9一下浏览器对html5新增标签的不识别。并导致CSS不起作用的问题 -->
        <!-- <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> -->
        <!-- 解决IE9一下浏览器对CSS3媒体查询的不识别 -->
        <!-- <script src="http://oaa.maxcdn.com/respond/1.4.2/respond.min.js"></script> -->
    <!-- [endif] -->
  • 引入相关样式文件
    Bootstrap内部已经引入了 normalize.css
<!-- 引入bootstrap核心样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  • 书写内容

注：

  • 直接拿bootstrap预先定义好的样式使用

  • 修改bootstrap原来的样式，注意权重问题

  • 学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么效果

布局容器：

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

  • 注意：Bootstrap使用有个要求，必须要先创建一个.container的容器，然后将内容放在里面。

1. container类：

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

  • 大屏（>=1200px）宽度定为1170px

  • 中屏（>=992px）宽度定为970px

  • 小屏（>=768px）宽度定为750px

  • 超小屏（100%）

2. container-fluid类

  • 流式布局容器，百分百宽度

  • 占据全部视口（viewport）的容器

  • 适合于单独做移动端开发

栅格系统

  • Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

  • Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份。

  • 注意：rem是根据屏幕大小来划分的，而栅格系统是根据container里面的内容进行划分的。

栅格选项参数：

  • 行（row）必须放到container布局容器里面

  • 我们实现列的平均划分，需要给列添加类前缀

  • xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；

  • 列（column）大于12，多余的”列（column）“所在的元素将被作为一个整体另起一行排列

  • 每一列默认有左右15px的padding

  • 可以同时为一列指定多个设备的类名，以便划分不同份数，例如”class="col-md-4 col-sm-6"

<!-- 如果子元素的份数相加等于12，则子元素刚好能占满整个container的宽度 -->
<div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>       
</div> 
<!-- 如果子元素的份数相加小于12，则子元素刚好能占不满container的宽度，则后面会有空白 -->
<div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>       
</div>
<!-- 如果子元素的份数相加大于12，则多余的子元素会另起一行显示 -->
<div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>       
</div>
<!-- 为每个子元素指定多个类名，在不同屏幕大小下所占的份数不同 -->
<!-- 大屏幕一行四个，中等屏幕一行三个，小屏一行两个，超小一行一个 -->
<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>

列嵌套

一个列内再分若干份小列

注意：列嵌套最好再加一个行row（必须叫这个名字），这样可以去除父元素默认的15px padding值，并使高度与父级一致

<!-- 列嵌套 -->
<div class="col-sm-4">
    <div class="row">
            <div class="col-sm-6">小列</div>
            <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移：

  • 使用.offset-md-*类可以将列向右侧偏移。

  • 这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin），会根据不同的设备宽度自动计算出margin-left值。

<!-- 列偏移 -->
<div class="row">
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 offset-md-4">2</div>
</div>

列排序

通过使用.col-md-push-和.col-md-pull-类就可以很容易的改变列（column）的顺序。

<!-- 列排序 -->
<div class="row">
    <div class="col-lg-4 col-lg-push-8">左侧</div><!-- 推 -->
    <div class="col-lg-8 col-lg-pull-4">右侧</div><!-- 拉 -->
</div>

响应式工具：

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

与之相反的，是visible-xs visible-sm visible-md visible-lg 是显示某个页面内容。

posted @ 2022-08-03 23:09  准备开始  阅读(161)  评论(0)    收藏  举报