資訊專欄INFORMATION COLUMN
摘要：可以使用在低端手機(jī)瀏覽器上嗎貌似不行但是你們一直誤解了一個(gè)問(wèn)題加上基本上絕大多數(shù)手機(jī)寬度都變成所以廢話不多說(shuō)上代碼全局變量返回對(duì)值得兼容處理通過(guò)一個(gè)和其值生成一個(gè)兼容的通過(guò)一個(gè)生成一個(gè)兼容的
vw可以使用在低端手機(jī)瀏覽器上嗎
貌似不行 但是你們一直誤解了一個(gè)問(wèn)題
加上
基本上android絕大多數(shù)手機(jī) 寬度都變成360
所以廢話不多說(shuō) 上sass代碼
////
/// This is a poster comment.
/// It will apply annotations to all items from file.
/// @group com.zhilizhiliui.framework.sass.common
/// @author andypinet
////
/// 全局變量
$com-zhilizhiliui-framework-sass-common-vw: (
"base": 360
) !global;
/// @access public
/// @example scss - com-zhilizhiliui-framework-sass-common-vw-by-value function
/// com-zhilizhiliui-framework-sass-common-vw-by-value(100)
/// // (360px, 100vw)
/// 返回對(duì)值得兼容處理
@function com-zhilizhiliui-framework-sass-common-vw-by-value($value) {
$base: map-deep-get($com-zhilizhiliui-framework-sass-common-vw, "base");
@return ($value * $base / 100 + 0px, $value + 0vw);
}
/// @access public
/// @example scss - com-zhilizhiliui-framework-sass-common-vw-by-value function
/// com-zhilizhiliui-framework-sass-common-vw-by-value(width, 100)
/// // width: 360px,
/// // width: 100vw
/// 通過(guò)一個(gè)css prop和其值 生成一個(gè)兼容vw的css
@mixin com-zhilizhiliui-framework-sass-common-vw-by-value($prop, $value) {
$base: map-deep-get($com-zhilizhiliui-framework-sass-common-vw, "base");
$result: com-zhilizhiliui-framework-sass-common-vw-by-value($value);
#{$prop}: nth($result, 1);
#{$prop}: nth($result, 2);
}
/// @access public
/// @example scss - com-zhilizhiliui-framework-sass-common-vw-by-value function
/// com-zhilizhiliui-framework-sass-common-vw-by-value((width: 100, height: 100))
/// // width: 360px,
/// // width: 100vw,
/// // height: 360px,
/// // height: 100vw,
/// 通過(guò)一個(gè)css map 生成一個(gè)兼容vw的css
@mixin com-zhilizhiliui-framework-sass-common-vw-by-map($map) {
@each $prop, $value in $map {
@include com-zhilizhiliui-framework-sass-common-vw-by-value($prop, $value);
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115145.html
摘要：另一種就是不縮放，對(duì)等問(wèn)題單獨(dú)引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實(shí)際開發(fā)中把融入到現(xiàn)有的移動(dòng)端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過(guò)移動(dòng)端頁(yè)面開發(fā)的同學(xué)都或多或少的了解過(guò)使用rem進(jìn)行移動(dòng)端頁(yè)面適配的方案以及使用vw的方案，(沒(méi)了解過(guò)的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配和再...
摘要：另一種就是不縮放，對(duì)等問(wèn)題單獨(dú)引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實(shí)際開發(fā)中把融入到現(xiàn)有的移動(dòng)端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過(guò)移動(dòng)端頁(yè)面開發(fā)的同學(xué)都或多或少的了解過(guò)使用rem進(jìn)行移動(dòng)端頁(yè)面適配的方案以及使用vw的方案，(沒(méi)了解過(guò)的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配和再...
摘要：純媒體查詢實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航特效附上效果圖代碼如下，復(fù)制即可使用我在這誰(shuí)敢動(dòng)我。純css+媒體查詢實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航特效 附上效果圖： 代碼如下，復(fù)制即可使用： DOCTYPE html> Document body { background: #801638; } body, ...
摘要：其次父組件中負(fù)責(zé)通用的功能，以及輪播的整體架構(gòu)，其結(jié)構(gòu)如下。下面的是一種移動(dòng)端的適配方案。接下來(lái)實(shí)現(xiàn)函數(shù)運(yùn)用動(dòng)畫切換到指定下標(biāo)的子項(xiàng)到此為止，咱們就已經(jīng)完成了一個(gè)初步的滑動(dòng)切換輪播圖的功能了。 前言 昨天寫了一篇側(cè)邊菜單組件的文章，閱讀人數(shù)挺多的，內(nèi)心很欣喜（偷著樂(lè)，第一篇文章有這么多人看）！乘著這股勁，今天在繼續(xù)寫一篇我們平時(shí)工作中更常用的滑動(dòng)輪播組件的文章。 效果展示 老規(guī)矩，咱們...
閱讀 1082·2021-11-24 10:27
閱讀 3356·2021-11-18 10:02
閱讀 2415·2021-11-16 11:45
閱讀 3174·2021-11-15 18:10
閱讀 844·2021-09-22 15:23
閱讀 1550·2019-08-30 15:53
閱讀 3033·2019-08-30 13:20
閱讀 1680·2019-08-30 12:53
