移动web开发基础

hanabi
516 阅读13分钟

一、移动端web开发基础

1. 视口

为了使网站在移动端有最理想的浏览和阅读宽度，设定理想视口（ideal viewport）

需要手动添写视口标签，通知浏览器操作

< meta >视口标签：

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

以上vscode可以自动生成。

属性解释说明
width宽度设置的是viewport的宽度，可以设置device-width特殊值（设备宽度）
user-scalable用户是否可以缩放，yes/no （1/0）
Initial-scale初始缩放比，1.0为不进行缩放
maximun-scale最大缩放比
minimum-scale最小缩放比

2. 二倍图

问题：如果一个 50 * 50 px的图片放到手机屏幕中，占有的物理像素点是 100 * 100 个，会造成图片模糊

解决方法： 使用一个本身就是 100 * 100 px 的图片去进行制作，替换原来图片，然后设置图片尺寸为 50 * 50 px，背景图同样。

对于背景图：

.box {

background-size: 50px 50px;

}

3. 移动端常见问题解决方案

（1）浏览器

因为移动端浏览器基本以webkit内核为主，我们需要考虑webkit兼容性问题，我们可以放心使用H5标签和CSS3样式，浏览器的私有前缀只需要考虑添加-webkit-即可

（2）CSS初始化样式

移动端css初始化推荐使用normalize.css而不是reset.css。是一个可以定制的css文件，它让不同的浏览器在渲染网页元素的时候形式更统一。解决了浏览器不一致的默认样式。

官网直接下载地址：necolas.github.io/normalize.c…

（3）CSS3盒子模型box-sizing

传统模式宽度计算：宽度=width+border+padding

box-sizing: content-box;

CSS3盒子模型：width中包含了border和padding，盒子占有的整体宽高是固定的，增加border和padding不会扩大盒子；

添加属性为：box-sizing: border-box;

（4）特殊样式(复制到css中)

清除点击高亮的样式：设置为transparent完成透明（可以在通配符的属性设置）

* {-webkit-tap-highlight-color: transparent;}

在ios移动端浏览器的按钮和输入框会有默认外观，如何自定义：给input标签添加属性：

input {-webkit-appearance: none;}

禁用长按页面（图片和a标签）时的弹出菜单：

img,a {-webkit-touch-callout: none;}

二、流式布局

1. 定义

百分比布局。

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

2. 注意事项

需要定义页面的最大、最小支持宽度

max-width最大宽度（max-height最大高度）

min-width最小宽度（min-height最小高度）

3. 京东移动端项目

移动端网址：m.jd.com

（1）搜索框布局

制作出更改页面宽度搜索框宽度随之变化但左右两个小盒子宽度固定的效果：父盒子相对定位，左右小盒子绝对定位，中间盒子在标准流中不必设置宽度

(2) 二倍图-精灵图制作

把精灵图的大小缩放为原来的一半，再读取相应位置的尺寸

查询css属性的网站：developer.mozilla.org/zh-CN/

三、flex布局

1. flex布局体验

  • 操作方便，布局简单，移动端应用广
  • PC端浏览器支持情况较差
  • IE 11或更低版本不支持或仅部分支持

建议：

  1. PC端用传统布局
  1. 移动端不考虑兼容可以用flex布局

2. flex布局原理

任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局以后，子元素的float, clear, 和vertical-align属性将失效。

父盒子为flex容器，子元素为flex项目，子元素可以横向排列也可以纵向排列。

3. flex布局父项常见属性

  • flex-direction:设置主轴的方向

    注意：主轴可以是x轴也可以是y轴

    属性值解释说明
    row默认值 从左到右
    row-reverse从右到左
    column从上到下 (设置y轴为主轴)
    column-reverse从下到上

  • justify-content: 设置主轴上的子元素排列方式

    注意：使用该属性前必须先确定好主轴是哪个

    属性值解释说明
    flex-start默认值 从头部开始 如果主轴是x轴，则从左到右 （相当于元素居左
    flex-end从尾部开始排列 （相当于元素居右
    center在主轴居中对齐 （如果主轴是x轴 则水平居中
    space-around平分剩余空间
    space-between先两边贴边 再平分剩余空间（重要）

  • flex-wrap：设置子元素是否换行

    flex布局中默认是不换行的，项目都排在一条线上

    属性值解释说明
    nowrap默认值 不换行 元素宽度会被父盒子宽度限制
    wrap换行

  • align-content：设置侧轴上的子元素的排列方式（多行）

    在单行下是没有效果的。需设置flex-wrap: wrap

    属性值解释说明
    flex-start从上到下
    flex-end从下到上
    center挤在一起居中）（垂直居中）
    space-around子项在侧轴平分剩余空间
    space-between子项在侧轴先分布在两头，再平分剩余空间
    stretch设置子项元素高度（多行）平分父元素高度（不设置高度的情况下

  • align-item：设置侧轴上（默认是y轴）的子元素的排列方式（单行）

    该子项为单项（单行）的时候使用。

    属性值解释说明
    flex-start默认值 从上到下
    flex-end从下到上
    center挤在一起居中）（垂直居中）
    stretch拉伸

  • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

eg： flex-flow: row wrap;

4. flex布局子项常见属性

  • flex属性（重要）

    定义子元素分配父盒子的剩余空间，用flex表示占多少份数

    属性值为数字，数字为1，表示占总份数中的一份，默认为0

    flex: <number>

  • align-self控制子项自己在侧轴上的排列方式

    允许单个项目有与其他不一样的对齐方式，可覆盖align-item属性

    默认为auto，表示继承父元素的align-item，如果没有父元素，等同于stretch

    span:nth-child(2) {align-self: flex-end;}

  • order属性

    定义项目排列顺序，数值越小，排列越前

    order: <number>

5. 常见的flex布局思路

IMG_EE54F4DBAD5F-1.jpeg

四、rem布局

1. rem单位

rem（root em）是一个相对单位，类似于em，em参考的是父元素字号大小的倍数，2em表示字号的2倍。

不同的是rem是相对于html元素的字体大小，是根元素字体大小的两倍。

例如：根元素设置font-size=12px; 非根元素设置width=2rem; 转换成px表示为24px。

rem优势：参考元素是html，一个页面只有一个html元素，可以实现整体控制。

2. 媒体查询

媒体查询是css3新语法：

  • @media可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果、安卓手机、平板等设备都用得到媒体查询

(1) 语法规范

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

用@media开头

  • meidatype 媒体类型
值解释说明
all用于所有设备
print用于打印机和打印预览
screen用于电脑、平板、手机移动端屏幕
  • 关键字 and not only
值解释说明
and可以将多个媒体特性连接在一起，“且”
not排除某个媒体类型 “非”
or可以测试多个媒体查询的条件，有一个条件成立即执行，“或”
only指定某个特定的媒体类型
  • media feature媒体特性 必须有小括号包含
值解释说明
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域的宽度
max-width定义输出设备中页面最大可见区域的宽度

一旦满足媒体查询条件，里面的css代码才会执行。

媒体查询可以书写多个。

(2) 引入资源

当样式繁多时，可以针对不同的媒体使用不同的stylesheets.

  • 语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3. Less

(1) 简介与安装

网址：lesscss.cn

less是一门css预处理语言，它扩展了css的动态特性。

  • 在终端查看是否安装成功

    查看node是否安装成功：node -v 查看npm的版本信息: npm -v

    • 打开终端terminal安装less

      输入命令 sudo npm install less -g

      安装成功之后终端输入：lessc -v检查是否安装成功

(2) Less变量

变量是指没有固定的值，可以动态改变的。css中的一些颜色和数值常使用。

@变量名: 值;

  • 变量命名规范：

    1.必须有@前缀，2.不能包含特殊字符，3.不能以数字开头，4.大小写敏感

    例如：@Color: deeppink;

    @fs14: 14px;

  • 变量使用

    div { background-color: @color;}

(3) Less编译

我们需要把.less文件编译成.css文件，这样html页面才能使用。

  • 方法 (nodejs)：在右击文件所在的文件夹，新建位于文件夹位置的终端标签页

使用命令：lessc 文件名.less > 文件名.css 回车即可在文件夹内看到编译成功的.css文件

在每次更改了.less文件后还需要再次进行编译

  • 方法2 (VScode Less插件)：Easy LESS

    只要保存less文件，会自动生成css文件，随时保存编译

在html中引入的是css文件。

(4) Less嵌套

  • css写法：

    #header .logo {width:300px; };

  • Less嵌套写法：

#header {
    .logo {
            width:300px;
           }
    }

  • 如果遇见 交集、伪类、伪元素选择器，用&*

    内层选择器的前面没有&符号，就会被解析为父选择器的后代；

    如果有&符号，就会被解析为父元素自身或父元素的伪类

(5) Less运算

任何数字、颜色或者变量都可以参与运算。加+减-乘*除/4种算术运算。

1.参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位

2.参与运算的两个数字，两个都有单位，最终单位取第一个数字的单位

3.less的运算符左右必须加空格

4.除法运算时需要加括号()

4. rem适配原理

(1) 方法1: 媒体查询

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

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

    具体查看common.less

(2) 方法2: flexible.js （推荐）

原理：把设备划分为10等份，如果当前设计稿为750px，只需把html文字大小设置为75px（750/10），里面页面元素rem值：页面元素的px值 / 75；剩余的，让flexible.js去算。

github地址：github.com/amfe/lib-fl…

需要在页面引入：

即可解决设备尺寸变化的问题，不需要进行媒体查询。

  • 更改flexible.js默认字号, 用!important层叠。

    @media screen and (min-width:750px){

    html {

    font-size: 75px !important;

    }

    }

  • cssrem插件

    在插件的扩展设置中Root Font Size改成设计稿的html文字大小，即可在输入px值时自动转化为rem，简化工作。

五、响应式布局

1. 响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备。

2. 响应式布局容器

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

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

  • 响应式尺寸划分

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

    小屏幕（平板，大于等于768px）：设置宽度为750px，（有版心概念）；

    中等屏幕（桌面显示器，>=992px）：宽度设置为970px；

    大屏幕（大桌面显示器，>=1200px)：宽度设置为1170px；

    也可以根据实际情况自定义划分。

3. Bootstrap

(1) 简介

目前最受欢迎的前端框架。有一套较完整的网页功能解决方案，有预制样式库、组件、插件。使用者需要按照框架所规定的某种规范进行开发。

中文官网：www.bootcss.com/

(2) 使用

  1. 创建文件夹结构

    项目文件夹：bootstrap、css、images

    bootstrap: css、fonts、js

  2. 创建html骨架结构

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
		<!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题-->	
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <!-- 解决ie9以下浏览器对css3 Media Query的不识别-->
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

  1. 引入相关样式文件

  2. 书写内容

    修改bootstrap原来的样式需要注意权重问题，在网页查看源代码找到样式使用的是哪一个选择器，例如是类选择器，可以增加一个另外的类名（不要更改原类名），再去添加样式。

    尽量不去修改bootstrap定义的样式，要熟悉它定义的样式和效果。

(3) bootstrap布局容器

  1. container类：响应式布局的容器，固定宽度。

    • 大屏(>=1200px)：宽度定为1170px
    • 中屏(>=992px)：宽度定为970px
    • 小屏(>=768px)：宽度定为750px
    • 超小屏：100%

    <div class="container"></div>

  2. container-fluid类：流式布局容器，百分百宽度。是占据全部视口的容器，适合移动端页面开发。

    <div class="container-fluid"></div>

(4) 栅格系统

1. 简介

超小屏（手机）<768px小屏（平板）>=768px中屏（桌面显示器）>=992px宽屏设备（大桌面显示器）>=1200px
.container最大宽度自动（100%）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列数（column)12121212
  • 通过“行（.row）”在水平方向创建一组“列（column）”。
  • 按照不同屏幕划分为12等份。
  • 每一列默认15px左右的padding
  • 可以为一列指定为多个设备的类名，以便划分不同份数，例如 class = "col-md-4 col-sm-6"，中屏每个元素占4列，小屏每个元素占6列。

2. 列嵌套

在一个列内再分成若干小列，可以增加一个.row元素和一系列.col-sm-* 元素到一家存在的.col-sm-*元素内。

<div class="container">
    <div class="row">
      <!-- 嵌套一个新的栅格系统 -->
      <div class="col-lg-4 row">
        <p class="col-lg-6">1</p>
        <p class="col-lg-6">2</p>
      </div>
      <div class="col-lg-4">2</div>
      <div class="col-lg-4">3</div>
    </div>    
  </div>

3. 列偏移

<div class="col-lg-4 col-lg-offset-4">右侧</div>

使用.col-md-offset-* 类可以将列向右侧偏移。*为份数，相当于给元素设置左边距。

4. 列排序

.col-md-push-* 往右推

.col-md-pull-* 往左拉

实现左侧元素右推，右侧元素左拉，实现列重新排序。

5. 响应式工具

.hidden-xs .hidden-sm .hidden-md .hidden-lg分别是元素在超小屏、小屏、中屏、大屏隐藏。

.visible-xs .visible-sm .visible-md. .visible-lg分别是元素在超小屏、小屏、中屏、大屏显示，其他屏幕隐藏。

总结

建议：制作网页时选取一种主要技术选型，其他技术为辅助，混合技术开发。

avatar
文章
阅读
粉丝