c++98 使用指针指针
We all know that there are a number of ways we can modify layout based on CSS media queries -- hell, we can even . One bit of outside the box thinking with media queries is deals with . Using the
pointer-events
property, we can also enable and disable some functionality with CSS based on media query state!
我们都知道,有很多方法可以基于CSS媒体查询来修改布局-地狱,我们甚至可以 。 与媒体查询无关紧要的一点是处理 。 使用
pointer-events
属性,我们还可以基于媒体查询状态启用和禁用CSS的某些功能!
The scenario is one that's present in the current implementation of the MDN redesign. On the left you see article content, on the right you see a table of contents:
该方案是MDN重新设计当前实施中的一种方案。 在左侧,您可以看到文章的内容,在右侧,您可以看到一个目录:
When pushed into the tablet media query, the table of contents should move above the content:
当推入数位板媒体查询时,目录应移至内容上方:
When on desktop, the table of contents should not be toggleable when the title is clicked. On tablet or other mobile device, however, the table of contents should toggle (slide up) when clicked to free up critical space, so as to avoid (possibly) loads of scrolling. I didn't want to use JavaScript to enable/disable the toggler, because...well...that would be inefficient. Instead I paired the pointer-events
property with the tablet media query:
在桌面上时,单击标题时目录不可切换。 但是,在平板电脑或其他移动设备上,单击目录时应切换(向上滑动)以释放关键空间,以避免(可能)避免滚动负荷。 我不想使用JavaScript启用/禁用切换器,因为...好吧...那会很低效。 相反,我将pointer-events
属性与平板电脑媒体查询配对:
/* disable by default */#toc .heading { pointer-events: none;}#toc i { display: none;}/* enable for tablet! */@media only screen and (max-width: 760px) { #toc .heading { pointer-events: auto; } #toc i { display: block; } }
I absolutely adore pointer-events
because it even prevents click events from firing, thus the JavaScript I use to trigger the doesn't occur. While I wouldn't say what I've done is overly clever, I would like to say that you should think about modifying more than just layout within different media queries. Oh, and also, pointer-events
is awesome!
我绝对喜欢pointer-events
因为它甚至可以防止触发click事件,因此不会使用用于触发JavaScript。 尽管我不会说我所做的事情过于聪明,但我想说的是,您应该考虑修改的内容不只是在不同媒体查询中的布局。 哦, pointer-events
真棒!
翻译自:
c++98 使用指针指针