xml地图|网站地图|网站标签 [设为首页] [加入收藏]
Grid中的陷阱和绊脚石,之调试大法
分类:web前端

CSS Grid中的陷阱和绊脚石

2018/04/02 · CSS · Grid

原文出处: Rachel Andrew   译文出处:大漠   

2017年3月,CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴,大家可以使用它来解决实际问题。

CSS Grid是一种不同的布局方式,在大家开始使用规范的时候,有很多常见的问题。这篇文章的目的是回答其中的一些问题,并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。

走近 WebAssembly 之调试大法

2018/04/26 · JavaScript · webassembly

原文出处: 周志鹏博客   

利用视口单位实现适配布局

2017/05/02 · CSS · 1 评论 · 布局

原文出处: 凹凸实验室   

响应式布局的实现依靠媒体查询( Media Queries )来实现,选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配,但这样做会比较麻烦,只能在选取的几个主流设备尺寸下呈现完美适配。
即使是通过 rem 单位来实现适配,也是需要内嵌一段脚本去动态计算根元素大小。

近年来,随着移动端对视口单位的支持越来越成熟、广泛,使得我们可以尝试一种新的办法去真正地适配所有设备尺寸。

为什么使用CSS Grid而不是CSS Flexbox?

在CSS网格布局在浏览器中可用之前,很多人都认为Flexbox是我们所有设计相关问题的答案。然而,Flexbox并没有提供比浮动更好的网格系统,尽管它确实比浮动创建一个网格系统更简单。一个真正的网格是二维的。这两个维度就是行和列,并且使用网格布局,你可以同时控制它们。使用Flexbox,你可以选择是否将这些项列成一行或列,一个或另一个,而不是两个。

这里有一个简单的示例,突出其区别。第一个布局使用Flexbox,为了能尽可能多的使用盒子,以适合可用的宽度。这里我们控制了整个行中的布局。允许Flex项目进行包裹,因此会创建新的行,但是每一行都是一个新的Flex容器。空间分布在行中发生,所以取决于最后一行多少项,它们有时不会与上面的Flex项对齐。DEMO1

第二个示例使用CSS Grid实现相同的布局,但是,你可以看到,最后一行中的项目始终保持在它们的列中。这是因为在网格中,我们将项目排列成行和列 —— 二维布局。

 DEMO2

你还可以在第二个示例中看到,在CSS Grid布局中,我们不需要向网格添加任何内容来进行布局。所有东西都被放在容器上。在Flexbox布局中,你必须针对Flex项目来设置flex-growflex-shrinkflex-basis属性。这是理解网格布局关键所在,也可能是大家有很多困惑的地方。Grid主要是关于包含元素的,而我们之前的所有布局方法都依赖于我们在布局中设置的宽度,使某些东西看起来像一个网格。

如果你使用一个简化版本的浮动12列“网格”,我们必须计算每一列的百分比大小,加上每个列之间间距的百分比大小。要创建跨多个列的项,需要将所有项的宽度加上用于分隔它们的边界宽度。DEMO3

使用Flexbox创建的网格也是如此。当我们在父节点上通过display:flex创建Flex布局时,Flex所有的大小都需要在单个Flex项目上进行。为了制作一个Flexbox的“网格”,我们必须阻止Flexbox做灵活的操作,而是应该设置百分比宽度,就像我们前面的浮动网格示例一样。使用Flexbox要比浮动更有一些优势,比如控制对齐和列等高之类的要简易得多。然而,在Flexbox和浮动的方法中仍然没有网格,只是通过设置项目的大小,并将它们排列起来,让其看起来像网格的东西。DEMO4

在网格中,所有的大小都发生在容器上。一旦我们创建了我们的网格轨道,我们就可以告诉单个项目(Grid项目)有多少个轨道可以跨越,但我们却有一个实际的网格。我们可以完全抛弃行的容器,因为网格已经有行了。这也意味着,我们也可以使用相同的方式进行跨列。这对于以前而言是件很难做的事情。

 DEMO5

前言

认识视口单位( Viewport units )

首先,我们要了解什么是视口。

在业界,极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。

而视口单位中的“视口”,在桌面端,毫无疑问指的就是浏览器的可视区域;但是在移动端,它指的则是三个 Viewport 中的 Layout Viewport 。

图片 1视口单位中的“视口”

根据CSS3规范,视口单位主要包括以下4个:

  • vw : 1vw 等于视口宽度的1%
  • vh : 1vh 等于视口高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个

视口单位区别于%单位,视口单位是依赖于视口的尺寸,根据视口尺寸的百分比来定义的;而%单位则是依赖于元素的祖先元素。

图片 2

用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况)

例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。

是否应该将网格用于主布局和Flexbox用于组件布局

随着大家开始接触和学习CSS Grid的布局,这个神话不断涌现。也许它来自于网格系统的使用,比如在Bootstrap或Foundation,大家关心的是一个整体网格上放置项目。这当然是使用网格布局的一种方法。不过,我还是会考虑在上一节提到的不同之处。问问你自己,这个布局是一维的还是二维的?

如果你可以使用你的组件,并且用行和列在它的上面绘制一个网格。它是二维的,那就使用CSS Grid来布局。图片 3

如果相反,你希望单个项目在一行中进行扩展,而不考虑上面一行中发生的情况,那就应该使用Flexbox布局更为合适。

图片 4

不管你想要展示的是一个完整的页面,还是一个很小的组件。重要的是你想在布局里面的项目分配空间和相互关联。

WebAssembly是什么?

下面是来自官方的定义:

WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.

关键词:”format”,WebAssembly 是一种编码格式,适合编译到web上运行。

事实上,WebAssembly可以看做是对JavaScript的加强,弥补JavaScript在执行效率上的缺陷。

  • 它是一个新的语言,它定义了一种AST,并可以用字节码的格式表示。
  • 它是对浏览器的加强,浏览器能够直接理解WebAssembly并将其转化为机器码。
  • 它是一种目标语言,任何其他语言都可以编译成WebAssembly在浏览器上运行。

想象一下,在计算机视觉,游戏动画,视频编解码,数据加密等需要需要高计算量的领域,如果想在浏览器上实现,并跨浏览器支持,唯一能做的就是用JavaScript来运行,这是一件吃力不讨好的事情。而WebAssembly可以将现有的用C,C++编写的库直接编译成WebAssembly运行到浏览器上, 并且可以作为库被JavaScript引用。那就意味着我们可以将很多后端的工作转移到前端,减轻服务器的压力。这是WebAssembly最为吸引人的特性。并且WebAssembly是运行于沙箱中,保证了其安全性。

更多关于WebAssembly基础入门, 可以看下这篇文章: 写得很详细。

(后文将主要使用wasm 名称表示 WebAssembly)

兼容性

其兼容性如下图所示,可以知道:在移动端 iOS 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持。

图片 5

截图来自Can I Use

图片 6

截图来自X5内核-Can I Use

网格轨道大小是否由内容来决定?

我们已经看到了如何在使用网格布局时,在容器上设置网格和网格大小。但是,网格中的项可以指定网格轨道大小。这里要记住的关键是,一个单元格大小的改变将会改变整个轨道的大小。如果你不希望这种情况发生,你可能需要一个单一维度的Flexbox布局。

最简单的方法就是使用auto,因为它会默认在隐式网格中创建网格轨道。一个自动大小的网格轨道将扩展到包含所有的内容。在下面的示例中,我有一个两列布局,在右边的列中添加更多的内容会导致整个行的扩展。第二行也是自动大小,再扩展以包含内容。

 DEMO6

我们可以使用两个参数来控制网格轨道大小,例如创建一个最小的网格轨道,但其仍然会增长以适应较大的网格项目。我们可以使用minmax()函数来做这个。传给minmax()函数的第一个值,它是网格轨道最小的值,第二个值是网格轨道最大的值。因此,你可以设置200px的行,但通过auto设置为网格轨道最大值,那么当有较多的内容时,不会出现内容溢出。

DEMO7

也有一些有趣的关键词可以设置大小,将在以后的文章中对它们进行适当的阐述。这些关键词在指定网格中允许内容来改变网格轨道大小,并且可以在CSS内部和外部的大小模块(CSS Intrinsic and Extrinsic Sizing Module)中找到相关的详细内容。例如min-content关键词的示例,使用它创建一个网格轨道时,将会创建尽可能小的网格轨道。

在我的例子中,这个词意味着其成为最宽的东西,网格轨首缩小以适应它。

 DEMO8

相反,如果你使用的是max-content,你会得到一个尽可能大的网格轨道。这可能会导致溢出情况,在下面的示例中,使用了overflow: scroll设置了网格溢出,所以max-content的网格轨道会导致滚动条出现。

DEMO9

关键要记住的是,这将会发生在整个网格轨道上。你需要确保网格轨道的其他网格项目也能巧妙地吸收额外的空间。

了解了如何对网格轨道大小进行调整,以及内容将如何改变网格轨道大小,这可能是新手使用CSS Grid布局中会感到最为困惑的事情之一。这需要花一点时间来理解 —— 我们之前没有任何类似的行为。这是理解事物如何运作的最好方法。

怎么调试?

稍微了解javascript 的人应该知道,在chrome或者firefox的开发者面板中可以很方便对js代码加断点、查看变量、单步执行等等,非常方便!

既然wasm主要是运行在web浏览器上的(当然也可以在非web环境中运行,参见官方文档描述:

但问题在于上文中说了 wasm 是一种二进制格式,虽然有可读的文本格式wast,但是调试起来依然比较费劲,最主要的问题是:你是不是更想能够调试被编译之前的c/c++ 源代码?

利用视口单位适配页面

对于移动端开发来说,最为重要的一点是如何适配页面,实现多终端的兼容,不同的适配方式各有千秋,也各有缺点。

就主流的响应式布局、弹性布局来说,通过 Media Queries 实现的布局需要配置多个响应断点,而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率下维持不变,而在响应断点切换的瞬间,布局带来断层式的切换变化,如同卡带的唱机般“咔咔咔”地一下又一下。

而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小,使得 CSS 与 JS 耦合了在一起。

有没有办法能够解决这样的问题呢?

答案是肯定的,通过利用视口单位实现适配的页面,是既能解决响应式断层问题,又能解决脚本依赖的问题的。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:Grid中的陷阱和绊脚石,之调试大法

上一篇:没有了 下一篇:别责怪框架,性能优化大挑战
猜你喜欢
热门排行
精彩图文