手淘flexible.js框架使用和源代码讲解小结_javascr

来源:http://www.chinese-glasses.com 作者:Web前端 人气:56 发布时间:2020-03-15
摘要:10bet,时间: 2019-11-23阅读: 138标签: scss封装成mixin复用 手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架。 在写css的时候, 很多样式都是 很常用但是

10bet,时间: 2019-11-23阅读: 138标签: scss封装成mixin复用

手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架。

在写css的时候, 很多样式都是很常用但是写起来很麻烦, 虽然现在有很多成熟的ui框架, 但是我们也不能一个简单的活动页也引入那么大个框架吧?

基本概念

在工作中我也攒下了不少常用css, 我把他们封装成了mixin, 挑选了5个分享给大家, 希望大家喜欢.

1、视窗viewport

做一名合格的"CV"工程师, "复制/粘贴"一把梭溢出显示省略号

可能写过移动端的朋友就知道viewport是什么意思。

参过参数可以只是单/多行.

如果你不知道的话,可以简单理解成:浏览器的可视区窗口。可能在PC端,viewport就是浏览器窗口的宽度高度。但在移动端设备上却就有点复杂,具体的详细介绍我就不介绍啦!可以自行百度...

/*** 溢出省略号* @param {Number} 行数*/@mixin ellipsis($rowCount: 1) { @if $rowCount =1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $rowCount; -webkit-box-orient: vertical; }}

物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

真.1px边框

设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素,然后由相关系统转换为物理像素。

移动端由于像素密度比的问题, 实际的1px边框看起来比较粗, 如果想要更"细"可以使用下面的代码.不同像素密度比的设备都可以兼容(pc/手机), 还支持任意数量圆角.

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。

/*** 真.1px边框* {List}: 多个方向边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom, right) 4个方向;* {Color} 边框的颜色, 默认#ccc;* {List} 4个圆角半径, 默认0;* {String} 一个高级设置, 一般都不需要改动, 由于细边框的实现使用了css的伪类, 所以为了规避可能出现的样式冲突, 我们可以自己指定使用:after还是:before, 默认after;*/@mixin thinBorder( $directionMaps: bottom, $color: #ccc, $radius: ( 0, 0, 0, 0 ), $position: after) { // 是否只有一个方向 $isOnlyOneDir: string==type-of($directionMaps); @if ($isOnlyOneDir) { $directionMaps: ($directionMaps); } @each $directionMap in $directionMaps { border-#{$directionMap}: 1px solid $color; } // 判断圆角是list还是number @if (list==type-of($radius)) { border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4); } @else { border-radius: $radius; } @media only screen and (-webkit-min-device-pixel-ratio: 2) {  { position: relative; // 删除1像素密度比下的边框 @each $directionMap in $directionMaps { border-#{$directionMap}: none; } } :#{$position} { content: ""; position: absolute; top: 0; left: 0; display: block; width: 200%; height: 200%; transform: scale(0.5); box-sizing: border-box; padding: 1px; transform-origin: 0 0; pointer-events: none; border: 0 solid $color; @each $directionMap in $directionMaps { border-#{$directionMap}-width: 1px; } // 判断圆角是list还是number @if (list==type-of($radius)) { border-radius: nth($radius, 1) * 2 nth($radius, 2) * 2 nth($radius, 3) * 2 nth($radius, 4) * 2; } @else { border-radius: $radius * 2; } } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { :#{$position} { // 判断圆角是list还是number @if (list==type-of($radius)) { border-radius: nth($radius, 1) * 3 nth($radius, 2) * 3 nth($radius, 3) * 3 nth($radius, 4) * 3; } @else { border-radius: $radius * 3; } width: 300%; height: 300%; transform: scale(0.3333); } }}

屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算。

等边三角形

设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

常用来做下拉菜单的方向指示, 如果你做的页面就是个简单的活动页, 引入"饿了么"一类的ui就有些大材小用了, 借助"三角形"你可以自己做一个简单的.

设备像素比 = 物理像素 / 设备独立像素

/*** 等边三角形* @param {String} 尺寸* @param {Color} 颜色* @param {String} 方向*/@mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) { width: 0; height: 0; border-style: solid; @if (bottom==$dir) { border-width: $size $size 0 $size; border-color: $color transparent transparent transparent; } @else if (top==$dir) { border-width: 0 $size $size $size; border-color: transparent transparent $color transparent; } @else if (right==$dir) { border-width: $size 0 $size $size; border-color: transparent transparent transparent $color; } @else if (left==$dir) { border-width: $size $size $size 0; border-color: transparent $color transparent transparent; }}

众所周知,iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt。

loading

其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了,首先我们来说一下常用的移动设备。

这是一个"半圆边框"旋转的loading, 你可以根据业务需求自己指定圆的半径.

iphone6: 375px*667px 实际像素:750px*1334px

@mixin loading-half-circle($width: 1em) { display: inline-block; height: $width; width: $width; border-radius: $width; border-style: solid; border-width: $width/10; border-color: transparent currentColor transparent transparent; animation: rotate 0.6s linear infinite; vertical-align: middle;}

iphone5: 320px*568px 实际像素:640px*1136px

棋盘

iphone4: 320px*480px 实际像素:640px*960px

如果你做一些界面生成器工具(类易企秀)你会用到.

nexus5X: 411px *731px 实际像素:411px*731px

/*** 棋盘背景* @param {Color} 背景色*/@mixin bgChessboard($color: #aaa) { background-image: linear-gradient( 45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color ), linear-gradient( 45deg, $color 26%, transparent 26%, transparent 74%, $color 74%, $color ); background-size: 10vw 10vw; background-position: 0 0, 5vw 5vw;}

以上数据都来自于chrome浏览器- -!!!

总结

其实我们的iphone手机都是视网膜屏幕,所以我们的实际像素因该是无力像素*视网膜屏的倍数。

上面的代码我放github了, 源码:

然而我们在实际的开发中ui给出的图一般都是750X1334的,其实iphone6的像素和ui设计的像素是一样大小的,但是我们的开发如果都是按照6的px来设计,那么我们的其它比6小尺寸屏幕的所有设备都会面临width不够的问题。flexible就完美的解决了这个问题。

应用中我们只要设置好他的公共比的像素就ok了,比如说如果ui图的像素是750,那我们需要的就是750/10,我们需要的就是75,我们所有的width的固定px就都可以变换成用rem像素代替实现样式统一例如我们width需要200px那么我们就可以这样写:

width=200rem/75;从而实现样式的兼容(特别注意:因为css不支持样式的计算,我们需要用less活着sass类似的css编译执行就可以得到最终的rem的值了)

另外,我们根据不同dpr可以设置一些不同的样式来实现视网膜屏幕的高清屏幕!

[data-dpr="1"] .selector { width: 10px; height: 32px; font-size: 14px;}[data-dpr="2"] .selector { width: 20px; height: 64px; font-size: 28px;}

我们根据不同的自定义属性data-dpr来设置不同的width和height 从而达到不同dpr屏幕具有不同的属性!

本文由10bet发布于Web前端,转载请注明出处:手淘flexible.js框架使用和源代码讲解小结_javascr

关键词:

最火资讯