移动端专题

tw_zgn
182 阅读3分钟

一、Icon 全解

本文是对 icon 的各种用法的简单介绍，icon下载比较好用的平台

链接 — iconfont-阿里巴巴矢量图标库

1.切图

  • 要求：需要对ps软件有基础的了解，能操作.psd等格式文件，图层，画布裁剪等。
  • 原理：将icon转化为图片格式，直接在代码中使用img 标签引入。
  • 优点：由于是图片的原因，可以自适应宽高，图片会默认保持比例 。

2. 背景图法

  • 原理：使用 css 的 background
.icon{
  background:red  url(./路径)；
  background-imag:url(./路径)；
}
  • 优点：图片大小不会因为 div 变化而变形 ，但是不推荐使用。

3. 雪碧图

  • 原理：利用css 将一张图片不需要显示的部分隐藏起来，用到了 background-position

CSS 属性为每一个背景图片设置初始位置。

这个位置是相对于由 background-origin 定义的位置图层的。

  • 用法：可以使用在线工具生成代码。
  • 缺点：这种方法比较古老。

4. font 方法 / Css方法

  • 原理 ： ****HTML entity 例如 &nbsp是空格 “[链接] Entity - 术语表 | MDN ”
  • 用法：使用iconfont 中的代码将图片声明成字体，然后再HTML中使用。或者使用伪类
  • 缺点：老版本 IE 不支持。
<div class="xxx" style="font-family:iconfont;">
  &#xe6l4
</div>

<style>
  @font-face{声明相关...}
  .xxx::before{
    content:'\e6l4'
    //注意此处的斜杠，这是css的写法和HTML的写法不同
  }  
</style>

5. svg 形式

二、移动端页面要兼容pc

1. 媒体查询 media query

  • 定义 ：CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，媒体查询是 响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局。
  • MDN : developer.mozilla.org/zh-CN/docs/…
@media screen and (width: 600px) {
    body {
        color: red;
    }
  /*屏幕宽度在600像素时候，执行这个css属性*/
}

2. viewport

  • 作用：阻止移动端页面缩放
<meta name="viewport" content="initial-scale=0.5,
maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

3. 移动端特点

  • 没有 hover ：悬浮
  • 有 touch 事件 ：触摸
  • 没有 resize：
  • 没有滚动条

三、手机“专用”的自适应方案

1. Rem

  • 定义：长度单位的一种，全称 root em

表示根元素的 font-size 1rem 为 16px。

  • 其他： px 像素

em 作为font-size的单位时，其代表父元素的字体大小，

em作为其他属性单位时，代表自身字体大小

vh viewport height 视口高度

vw 视口宽度

  • 默认： 网页 font-size 为 16px

2. 动态rem

  • Api : window.innerWidth 返回以像素为单位的窗口内部宽度，

如果垂直滚动条存在，这个属性会包括滚动条的宽度

  • 原理：利用 js 使 1rem 等于 页面宽度，那么当宽度变化时，rem也会随之动态变化

为了方便美观，可以设置为1rem 等于屏幕宽度的十分之一

  • 原则： HTML 的 font-size 不能小于 12 px

当屏幕特别小的时候，可以使用 px 和 rem 混用

<script>
  let pagWidth = window.innerWidth;
  document.write(`
    <style> 
      html{font-size:'+ pageWidth/10 +'px;}
    </style>`)
</script>
avatar
文章
阅读
粉丝