移动端

taoye
35 阅读4分钟

1. icon

img法（Photoshop）

psd文件单独导出某个图层：右下角选中图层，单击鼠标右键选Duplicate Layer（复制图层），Document：New；切图：Image-trim，再导出png

静态服务器预览
复制代码
npm i -g http-server
http-server -c-1

background法

示例

uTools_1698927273674.png

background:
复制代码
.icons > icon{
    background: transparent url(./qq.png) no-repeat 0 0; //0 0表示左上角对齐
}
.icons > .icon.qq{ background-image: url(./qq.png);
.icons > .icon.weibo{ background-image: url(./weibo.png);
.icons > .icon.weixin{ background-image: url(./weixin.png);

background合一法（雪碧图）

原理：将所有图片放到一张图片上，只显示局部

CSS Sprite Generator 按步骤做（加个prefix前缀，如xxx）

uTools_1698929451840.png

font法

iconfont原理：将字符换成对应的图片

  1. iconfont-html：html-entity（&开头表示特殊字符）

uTools_1698931562719.png

  1. iconfont-css（原理：::before{ content:'hi' }

uTools_1698933607056.png

SVG法

iconfont-symble // 见帮助文档

只用css法（新手慎用）

css icon

2. 响应式移动端

媒体查询

直接写css样式：

less
复制代码
@media(mix-width: 250px) and (max-width: 650px) {
    body{ background: red } 
}   // 250-650px显示css样式`

文件代替标签：

ini
复制代码
<link rel="stylesheet" href="style.css" media="only screen and (max-width:320px)">
// 设备只有在最大宽度为320px才生效（已经下载好了）

响应式（即显示/隐藏元素）

不同页面两种状态用媒体查询

less
复制代码
nav{ display: block } // 正常情况下，导航显示
@media(min-width:450px){  // 非手机页面，导航隐藏
    nav {display: none;}
}

同一页面两种状态用active，classList.toggle

菜单按钮点击显示隐藏内容
复制代码
.xxx{ display: none; }  // xxx默认的css状态
.xxx.active{ display: block; }  // 表示css变化后的样式

menu.onClick = function(){
    xxx.classList.toggle('active')  // 点击切换样式
}

正紧的手机端：meta

由于iPhone手机像素为375px，而当时中国网页都是980px，因此有个不成文的规定：用375px模拟980px，这样用户就能通过缩放来访问网页。

uTools_1698987392410.pnguTools_1698987274433.png

但这显得很智障，因为我已经做了pc和手机两种，你还要给我默认缩放。禁止缩放的方法：meta

ini
复制代码
meta name="viewport",  视口
content="width=device-width,  宽度为设备宽度
user-scalable=no,  禁止用户缩放 
initial-scale=1.0,  初始缩放倍数为1.0 
maxmum-scale=1.0,  最大最小缩放为1.0 
minimum-scale=1.0"

手机端交互方式不一样

  • 没有hover
  • 有touch事件
  • 没有resize
  • 没有滚动条

3. 动态REM

常用单位：px（像素），em（一个M（汉字/font-size）的宽度），rem（根元素的font-size） ，vh（viewport height视口高度），vw（view width视口宽度，兼容性较差）

注意：网页font-size默认为16px；chrome最小像素为12px

REM和EM区别：REM为一个根元素的宽度；EM为自己元素的font-size的宽度

手机端方案的特点：

  1. 所有手机显示的界面都是一样的，只是大小不同
  2. 1 rem == html font-size == viewport width
xml
复制代码
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>

使用 JS 动态调整 REM：js获取屏幕宽度 = font-size，用REM进行缩放。用宽度来定义高度，适配的css比例才刚刚好。 （使用场景： 解决使用百分比宽度的缺陷：无法与高度适配，无法确定高度因为宽度就不确定）

uTools_1699106274603.png

注意：

  1. chrome的font-size最小为12px，因为如上写法导致大小为小数，所以在js获取屏幕大小后缩小10倍即可，缩小太多会使font-size小于12px而出错
  2. REM 可以与其他单位同时存在
css
复制代码
font-size: 16px;
border: 1px solid red;
width: 0.5rem;

4. 在 SCSS 里使用 PX2REM

  • npm config set registry registry.npm.taobao.org/
  • touch ~/.bashrc
  • echo 'export SASS_BINARY_SITE="npm.taobao.org/mirrors/nod… >> ~/.bashrc
  • source ~/.bashrc
  • npm i -g node-sass
  • mkdir ~/Desktop/scss-demo
  • cd ~/Desktop/scss-demo
  • mkdir scss css
  • touch scss/style.scss
  • start scss/style.scss
  • node-sass -wr scss -o css

编辑 scss 文件就会自动得到 css 文件

在 scss 文件里添加

css
复制代码
    @function px( $px ){
      @return $px/$designWidth*10 + rem;
    }

    $designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。如果设计师的设计稿宽度不统一，就杀死设计师，换个新的。

    .child{
      width: px(320);
      height: px(160);
      margin: px(40) px(40);
      border: 1px solid red;
      float: left;
      font-size: 1.2em;
    }

即可实现 px 自动变 rem

avatar
文章
阅读
粉丝