惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

N
News and Events Feed by Topic
D
Docker
云风的 BLOG
云风的 BLOG
F
Fortinet All Blogs
F
Full Disclosure
H
Hackread – Cybersecurity News, Data Breaches, AI and More
P
Proofpoint News Feed
Microsoft Azure Blog
Microsoft Azure Blog
WordPress大学
WordPress大学
The GitHub Blog
The GitHub Blog
L
LangChain Blog
H
Help Net Security
B
Blog
T
Tailwind CSS Blog
V
V2EX
博客园_首页
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
The Cloudflare Blog
Recent Announcements
Recent Announcements
aimingoo的专栏
aimingoo的专栏
美团技术团队
A
About on SuperTechFans
C
Cybersecurity and Infrastructure Security Agency CISA
K
Kaspersky official blog
I
InfoQ
Project Zero
Project Zero
I
Intezer
Google DeepMind News
Google DeepMind News
博客园 - 【当耐特】
Hugging Face - Blog
Hugging Face - Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
T
Threat Research - Cisco Blogs
Last Week in AI
Last Week in AI
C
Cyber Attacks, Cyber Crime and Cyber Security
G
GRAHAM CLULEY
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
AWS News Blog
AWS News Blog
Spread Privacy
Spread Privacy
S
Securelist
Recorded Future
Recorded Future
D
Darknet – Hacking Tools, Hacker News & Cyber Security
博客园 - 叶小钗
S
Security Affairs
Blog — PlanetScale
Blog — PlanetScale
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
月光博客
月光博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
罗磊的独立博客
The Hacker News
The Hacker News

前端优化

前端 import cost 插件-bundle size plus - V2EX 面试的时候遇到一个奇葩需求,向大佬们取经。 - V2EX 请教下 react 前端如何封装页面组件 - V2EX 寻找前端 SEO 大佬付费咨询 - V2EX SaaS 前端项目重构 - V2EX 有哪个 AI 应用可以把图片切片成 html5+css? - V2EX css animation 动画 CPU 占用高 - V2EX 2024 年了,国内有没有好用的 Google Fonts 代理服务推荐? - V2EX 寻求前端样式优化 前端性能优化 - V2EX img 标签到底需要关闭吗? - V2EX [前端] chrome 怎么突破最大并发数限制? - V2EX 怎么检测远程图片是否是渐进式呢 - V2EX 100 元找个人优化单页网站代码 - V2EX 一般上传文件超过多大才需要做分片上传? - V2EX 如何实现页面加载完毕之后再跳转 - V2EX [前端问题]像苹果官网那种滚到一个页面,放一些动画的效果怎么做的? - V2EX 客户对速度要求高, nginx 的 pagespeed 模块有没有什么坑? - V2EX 有人用过电报的 Webpage Bot 吗。我发送过链接图片错了。然后我用 Webpage Bot 更新。图片一直更新不过来。 - V2EX 前端加载速度优化,有没小伙伴有优化的黑科技(骚操作),嘻嘻学习下 - V2EX 求大佬推荐一款安全便捷的师生控制电脑教学软件跪求! - V2EX spa 应用白屏时间有什么好的测量方法? - V2EX 优化到 890ms 了 感动的想哭,果然找问题不能着急~~ - V2EX 网页问题,在 mac safari 滚动卡顿。。 - V2EX [前端] 关于 Chrome 字体渲染的 Grayscale 问题 - V2EX 帮朋友做个产品展示官网,结果找到新手,做得差强人意,后台也不堪入目 - V2EX 前端小白如何练级到标准版? - V2EX [tomcat 共享目录] 关于使用 tomcat 共享目录内文件 - V2EX 分享一个免费在线纯客户端图片压缩神器,支持单次最大 1000 张图片压缩 - V2EX import 引用模块如何优雅的减少 webpack 打包体积? - V2EX 你写的代码被人吐槽过吗? - V2EX 学 vue 前要学什么 - V2EX [WEB 前端] 设置 initial-scale=0.5 时遇到一个 BUG - V2EX 使用 SecurityWorker 加密你的 Javascript 核心算法 - V2EX 有本有办法解析 vue 文件,大概能知道当前这个 vue 文件的请求了哪些接口并且影响了哪一块视图的数据 - V2EX vue 项目如何自动化查看到每个(划重点)vue 组件渲染后的效果 - V2EX 如何检查前端 HTML 与 UI 的效果还原度? - V2EX 各位亲, 怎么看前端文件的性能啊 - V2EX 求贤 [前端] [设计] 。如果你有空闲时间,想做点工作外的东西,请联系。 - V2EX 前端各种刘海屏除了真机,在 chrome 里怎么调试啊? - V2EX 页面自适应还是开发两套登录方式? - V2EX 为什么拼多多的小程序体验这么的流畅?感觉像在使用原生 APP 一样 - V2EX 钉钉全新开发方式-E 应用:节日贺卡,中秋送祝福,用起来还不错呀 - V2EX 如何让 WordPress 文字段落首行缩进,不影响视频图片居中? - V2EX vue 单页面应用如何 SEO - V2EX 前段中 F12 修改 js 代码如何实时生效 - V2EX 扒代码的时候,判断哪些类或属性是 js 加的 - V2EX IOS9 和 8 版本的浏览器有办法实现复制到剪贴板吗 - V2EX echarts 占用内存过高,如何解决? - V2EX
CSS grid 布局,有没有什么方法可以保持至少 2 列? - V2EX
JCZ2MkKb5S8ZX9pq · 2021-01-26 · via 前端优化

这是一个创建于 1965 天前的主题,其中的信息可能已经有所发展或是发生改变。

.parent{
    width: 90vw;
	max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1em;
}

.item {
   
}
  • 希望在宽屏时(max-width: 1280)保持 4 列
  • 宽度缩小时自动减少列 (上述两点目前都满足了)
  • 但又希望至少能保持两列(现在会变为一列)

请问有没有什么好的解法?


附加题:渐变 border (圆角、内部镂空、宽高自适应)有没有什么好的实践方式?

  • 现在用的伪对象填渐变,本体填一个跟外部一样的背景色。缺点是背景如果加了动画,内部伪镂空就露馅了。
  • 还试过用 box-shadow 啥的,感觉效果不好。
  • 直接画 svg 啥的还没试,先来问问。
old9

1

old9      2021 年 1 月 26 日   ❤️ 1

grid-template-columns: repeat(auto-fill, minmax(min(calc(45vw - .5em),300px), 1fr));

后面的问题 border-image 可以实现,现在浏览器支持已经比较好了

JCZ2MkKb5S8ZX9pq

2

JCZ2MkKb5S8ZX9pq      2021 年 1 月 26 日

@old9
这个加 min 我之前也考虑过,用来限制字体的上下限,没有生效。
但刚才在测试网页上写又是有效的,刚才看到说可能是 less 的问题,我明天再试试看。谢谢。

JCZ2MkKb5S8ZX9pq

3

JCZ2MkKb5S8ZX9pq      2021 年 1 月 26 日

@old9
刚好碰到高手,再请教一个问题。
刚才魔改 Behance,写一个 stylish,碰到一个问题。
https://www.behance.net/galleries/ui-ux

我希望这个页面图片铺满,隐藏其它信息。

/* 页面外框 */
ul[class*=ContentGrid]{margin:0}
/* 隐藏作者 */
div[class*=visibleStatsAndOwners],div[class*=ProjectCover-details]{display:none!important}
/* 隐藏边距 */
*[class*=Search-content],*[class*=ContentGrid]{padding:0!important;}

套了上述 css 之后大致实现需求。
但是它的每个图片块的宽度是百分比,基本还是整数位,但高度根据图片 auto,就会出现小数位。
比如 1920 的屏幕,一格就是 384*300.36 。
这个小数点高度就会导致上下两张图如果是深色的话,中间会漏一条 sub pixel 的细细的白边。
请问这个有解嘛?

父容器它是 flex row wrap,尝试 margin:-1px 无果。

mascteen

4

mascteen      2021 年 1 月 26 日

linear-gradient

old9

5

old9      2021 年 1 月 26 日   ❤️ 1

我看他好像是写了 flex 没用(?)而是用绝对定位+transform 硬算出来的网格布局,你可以改成 flex 或者 grid 试试。

JCZ2MkKb5S8ZX9pq

7

JCZ2MkKb5S8ZX9pq      2021 年 1 月 26 日

@old9
感谢提醒。去掉了 transform 和 absolute 的定位方式( important 覆盖),这样改完再套 flex 是可以了。

ianva

9

ianva      2021 年 1 月 26 日

@old9 这个 ID 让人想起当年那篇 on having layout

old9

10

old9      2021 年 1 月 26 日

@ianva 哈看来是老同志了,现在写 CSS 多幸福啊

JCZ2MkKb5S8ZX9pq

11

JCZ2MkKb5S8ZX9pq      2021 年 1 月 26 日

@old9
再请教一下,grid 布局时,好像每个格子都默认带有 overflow:hidden 属性(刚才刚好有 border 和 shadow 碰到)。
请问这个属性能够去掉嘛?
还是只能在 item 上套一层,用 margin/padding 之类的替代 gap ?

JCZ2MkKb5S8ZX9pq

13

JCZ2MkKb5S8ZX9pq      2021 年 1 月 27 日

@old9

试了下,less 直接丢掉了部分内容。
grid-template-columns: repeat(auto-fill, minmax(min(calc(40vw - 1em), 250px), 1fr));
变成了
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

不论是插件导出 css,还是页面直接用脚本读 less 都是一样结果。

请问有什么建议嘛。是放弃 less 整体改用一个别的啥,还是再写一个 css 打个补丁上去呢。或者有什么其他建议嘛,请指教。

JCZ2MkKb5S8ZX9pq

17

JCZ2MkKb5S8ZX9pq      2021 年 1 月 28 日

@old9
想到可以在图上直接画个圆角,但不晓得是否支持 svg,而且万一需要调整颜色大小粗细也感觉有点麻烦。不知道有没有什么更好的解法。

old9

18

old9      2021 年 1 月 29 日

可以 css 里面用 inline svg,基本可以调