content# 指代html content 就是你插入的html内容
效果图
首先一个很明显的 我们发现 我们需要一个上下的一个容器 上下不定 上方要填充剩余部分
那么flex是可以用的
这里说下虽然flex新标准在后续的webkit内核浏览器中加上 但是从一开始chrome版本就可以使用webkit-box
<div class="layout flex full-height vertical">
<div class="layout__item flex-1">
</div>
<div class="layout__item">
</div>
</div>分析图 我们可以发现 下方是一个tab-bar 那么我们就应该
<div class="tab-bar tab-bar--basic sys-tab-bar">
<div class="layout flex horizontal">
<div class="layout__item flex-1 tab-bar__item">
<div class="layout flex full-height vertical horizontal-center vertical-center">
<div class="layout__item">
#content#
</div>
</div>
</div>
</div>
</div>如果你写过ios界面开发 那么你可以发现Tab Bar的Tab Bar item是均分的
很明显可以用flex row解决
为了演示加了高度 实际上最外层容器最好加个高度 这样布局容易些
先定义tab-bar
@mixin interface-tab-bar() {
.tab-bar {
@content;
}
}
@mixin use-tab-bar() {
$defaults: (
".tab-bar": (
)
);
@include interface-tab-bar() {
@include register-hook(".tab-bar");
@content;
}
}
@mixin use-tab-bar--basic() {
$defaults: (
".tab-bar--basic": (
)
);
.tab-bar--basic {
@include register-hook(".tab-bar--basic");
@content;
}
} 实例化 页面全局样式定义下
@include use-tab-bar();
@include use-tab-bar--basic() {
padding-top: 10px;
padding-bottom: 10px;
background-color: #00b3ee;
}
解决玩下方tab-bar的定义 我们来解决grid的问题 理论上使用flex-wrap 是不错的解决方案 不过旧版本的flex
模型并没有提供相应东西 怎么办 ok 我们使用一款postcss插件 lost github 链接
首先有个小问题 flex-1并不意味着盒模型真的有那么大 所以最好还是用absolute绕开问题
<div class="layout__item flex-1 utility-pos-relative">
<div class="layout full-parent utility-pos-absolute collection-view phone-test" style="background-color: #93C47D">
@for($i = 0; $i < 16; $i++)
<div class="layout__item collection-view__cell">
<div class="layout flex full-height vertical horizontal-center vertical-center">
<div class="layout__item">
<% $i+1 %>
</div>
</div>
</div>
@endfor
</div>
</div>scss
@lost gutter 0px;
.layout.collection-view.phone-test {
lost-utility: clearfix;
> .layout__item {
width: 23%;
lost-column: 1/4;
}
@include register-hook("#{&}");
}组件定义为ios端collection-view 每个layout__item为collection-view__cell
我也不知道ios touch icon到底叫什么 索性自己取个名字
<div class="button icon-button app-launcher-button">
<picture class="icon-button__picture">
<source srcset="/assets/static/img/mm.jpeg" media="(min-width: 600px)">
<img src="/assets/static/img/tubiao.png" alt="MDN">
</picture>
<div class="text-align-center icon-button__content"><% $i+1 %></div>
</div>因为常见的设计没有横过来的 其实多加一层layout不是不可以 不过我是想说不加也可以
picture元素可以针对不同media 更换不同图片 真响应式啊
<div class="layout flex full-height vertical">
<div class="layout__item flex-1 utility-pos-relative">
<div class="layout full-parent utility-pos-absolute collection-view phone-test" style="background-color: #93C47D">
@for($i = 0; $i < 16; $i++)
<div class="layout__item collection-view__cell">
<div class="layout flex full-height vertical horizontal-center vertical-center">
<div class="layout__item">
<div class="button icon-button app-launcher-button">
<picture class="icon-button__picture">
<source srcset="/assets/static/img/mm.jpeg" media="(min-width: 600px)">
<img src="/assets/static/img/tubiao.png" alt="MDN">
</picture>
<div class="text-align-center icon-button__content"><% $i+1 %></div>
</div>
</div>
</div>
</div>
@endfor
</div>
</div>
<div class="layout__item">
<div class="tab-bar tab-bar--basic sys-tab-bar">
<div class="layout flex horizontal">
@for($i = 0; $i < 4; $i++)
<div class="layout__item flex-1 tab-bar__item">
<div class="layout flex full-height vertical horizontal-center vertical-center">
<div class="layout__item">
<div class="button icon-button app-launcher-button">
<picture class="icon-button__picture">
<source srcset="/assets/static/img/mm.jpeg" media="(min-width: 600px)">
<img src="/assets/static/img/tubiao.png" alt="MDN">
</picture>
<div class="text-align-center icon-button__content"><% $i+1 %></div>
</div>
</div>
</div>
</div>
@endfor
</div>
</div>
</div>
</div>把内容放上去
放个演示视频
bilibili地址
请选择php分支 项目链接
微信 uc浏览器兼容的问题
首先 flexbox 可以用 就不说了
再其次 calc 都是无法使用复杂表达式的 所以我们需要一个兼容 calc-polyfill github链接
然后为了彻底兼容 我收集编写了一套兼容方案
首先在head加入一些js代码
<script>
if (typeof CSS === "undefined") {
document.querySelector("html").classList.add("not-support-highlevelcss");
} else {
document.querySelector("html").classList.add("support-highlevelcss");
}
// https://github.com/jieyou/rem_layout
!function(a,b,c){function q(){var d=Math.min((o?e[h]().width:f.innerWidth)/(a/b),c);d!=p&&(k.innerHTML="html{font-size:"+d+"px!important;"+n+"}",p=d)}function r(){clearTimeout(l),l=setTimeout(q,500)}var l,d=document,e=d.documentElement,f=window,g="addEventListener",h="getBoundingClientRect",i="pageshow",j=d.head||d.getElementsByTagName("HEAD")[0],k=d.createElement("STYLE"),m="text-size-adjust:100%;",n="-webkit-"+m+"-moz-"+m+"-ms-"+m+"-o-"+m+m,o=h in e,p=null;a=a||320,b=b||16,c=c||32,j.appendChild(k),d[g]("DOMContentLoaded",q,!1),"on"+i in f?f[g](i,function(a){a.persisted&&r()},!1):f[g]("load",r,!1),f[g]("resize",r,!1),q()}(
320, // 设置设计稿基准宽度
16, // 设置开发时的被除数（见HOW TO USE第4步） 在设计稿基准宽度为320时最好设置为16（在在设计稿基准宽度为其他值时等比放大，如640时设置为32等）。因为浏览器默认的值就是16，这样代码失效或尚未起效时，不会有布局问题
32 // 设置最大根元素font-size，请注意这是一个css像素值，而非物理像素值。它的作用是，当用户用非常宽的屏幕（pad、pc）访问页面时，不至于使得根元素的font-size超过这个值，使得布局非常难看。见图“show/wide_max_rem.jpg”
);
</script>确定设计稿大小 使用我的zhilizhili-ui 中polyfill-gaoji-set就可以生成一个兼容数值
$desgin-device-width: 375 !global;
$desgin-device-height: 627 !global;
@mixin polyfill() {
@include use-hook(".layout.collection-view.phone-test .app-launcher-button picture > img") {
@include polyfill-gaoji-set((
width: 60 #vw,
height: 60 #vw
));
}
@include use-hook(".tab-bar.sys-tab-bar picture > img") {
@include polyfill-gaoji-set((
width: 60 #vw,
height: 60 #vw
));
}
}
@include polyfill();
@include json-encode($polyfill);为了加速css解析 最好把要解析的文本放到页面中
<style>
.layout.collection-view.phone-test > .layout__item {
width: 23%;
width: calc(99.99% * 1/4 - (0px - 0px * 1/4)); }
</style>如果你想使用vw, vh在手机端 那么就要使用配套的vw, vh polyfill 当然 不需要自己把css提取出来 scss方法已经提取好 不需要多虑
import isFunction from "lodash/lang/isFunction";
export default function (pageRenderReady) {
var vwvhsupportready = new CustomEvent("vwvhsupportready");
document.addEventListener("vwvhsupportready", function() {
if (isFunction(pageRenderReady)) {
pageRenderReady();
}
});
// chrome版本号低于28
if (typeof CSS === "undefined") {
var content = window.getComputedStyle(
document.querySelector('head')
).fontFamily.replace(/\\/g, "").replace(/'/g, '');
var viewportwidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var viewportheight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
function rel(propval, unit) {
return parseFloat(propval.replace(unit, ""));
}
function cal(propval) {
if (typeof propval != "string") {
return propval;
}
if (propval.indexOf('vw') > -1) {
return viewportwidth * rel(propval, "vw") / 100 + "px";
} else if (propval.indexOf('vh') > -1) {
return viewportheight * rel(propval, "vh") / 100 + "px";
} else {
return propval;
}
}
function setVwStyle(ele, cssprops) {
for (var csspropkey in cssprops) {
if (csspropkey === "transform") {
var ret = cssprops[csspropkey];
var transValues = ret.match(/[\w-]+(?:vw|vh)/g);
for (var i = 0; i < transValues.length; i++) {
ret = ret.replace(transValues[i], cal(transValues[i]));
}
ele.style["-webkit-" + csspropkey] = ret;
ele.style[csspropkey] = ret;
} else {
ele.style[csspropkey] = cal(cssprops[csspropkey]);
}
}
}
var parseobj = ( new Function( 'return (' + content + ');' ) )();
for (var key in parseobj) {
var elements = Array.prototype.slice.call(document.querySelectorAll(key));
if (elements) {
for (var i = 0; i < elements.length; i++) {
console.dir(elements[i]);
setVwStyle(elements[i], parseobj[key]);
}
}
}
document.dispatchEvent(vwvhsupportready);
} else {
document.dispatchEvent(vwvhsupportready);
}
}只需要支持一下 然后在回调函数里就是正确的布局
import supportvwvh from "../lib/support_vw_vh";
function main() {
}
supportvwvh(main);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。