CSS
大名张无忌
前端开发,技术栈涉及:Vue、React、小程序,交流可以私信/邮件:[email protected]
展开
-
【无障碍】tabindex
简介tabindex是全局属性:用户操作tab键的顺序——HTML标签元素都可以用的属性,比如说id、class等属性都是HTML的全局属性。tabindex属性是一个与键盘访问行为息息相关的属性,或者说是用户体验息息相关的属性场景:鼠标坏了/投屏的键盘操作作用:管理键盘焦点,决定元素能否被选中交互元素:常见的a、button、input:隐式可聚焦元素、内置键盘事件处理https://allyjs.io/data-tables/focusable.htmldocument.activeEl原创 2021-11-10 17:22:34 · 2015 阅读 · 0 评论 -
手机端适配
整体布局适配:CSS移动端布局适配缩放与300ms延时:html { touch-action: manipulation;}/* 兼容旧版本浏览器 */<script type='application/javascript' src='/path/to/fastclick.js'></script><script> document.addEventListener('DOMContentLoaded', function() { F.原创 2021-01-07 08:27:19 · 138 阅读 · 0 评论 -
CSS 图片加载优化
常见优化:在这里插入代码片图片压缩上传图片懒加载:先用一个占位,再去请求图片进行替换图片渐进加载:先请求一个模糊图片,再去请求高清图片替换源图优化 4. 根据不同需求加载不同的图——srcset属性只要图片原始大小>css设置宽度*DPR就会清晰(1)根据DPR选择<img src="image.jpg" srcset="image.jpg, image_2x.jpg 2x,原创 2021-01-02 14:40:52 · 465 阅读 · 1 评论 -
CSS 移动端布局适配
手机屏幕的逻辑像素一般在320px~428px这个范围,手机页面最常见的布局就是水平均分排列和两栏布局。Flex响应式布局,0适配科学得使用CSS布局,写出来的内容就是适配的。缺点设计师一般只有一稿,导致在其他大小的屏幕上没有标准设计;某些屏幕上样式出现问题需要实际检测出来后再微调;对于一些非匀分排列和两栏布局的设计风格就无能为力了等比缩放屏幕布局、大小固定,在不同设备上进行缩放 <meta name="viewport" content="width={设计稿宽度}, in.原创 2020-12-22 15:28:17 · 375 阅读 · 0 评论