获得徽章 2
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
7月26日打卡，今日继续学习《前端优秀实践不完全指南》
1. 字体
font-family: system-ui 能够自动选择本操作系统下的默认系统字体。
- 尽量使用系统默认字体
- 兼顾中西，西文在前，中文在后
- 兼顾旧操作系统，以字体族系列 serif 和 sans-serif 结尾
2. 焦点响应
在适当位置和时机，自动获得焦点
3. 注意可访问性
1. 字体
font-family: system-ui 能够自动选择本操作系统下的默认系统字体。
- 尽量使用系统默认字体
- 兼顾中西，西文在前，中文在后
- 兼顾旧操作系统，以字体族系列 serif 和 sans-serif 结尾
2. 焦点响应
在适当位置和时机，自动获得焦点
3. 注意可访问性
展开
评论
点赞
7月25日打卡，今日继续学习《前端优秀实践不完全指南》。
1. 零内容展示
考虑两种情况：数据为空 或 出现异常，开发者要考虑到这两种情况，并给用户响应的反馈。
2. 关于图片
建议设置宽高，防止图片大小不同导致布局失效。
3. 优化cursur
对于不同场景，给不同的cursur
4. 添加进制选择
比如禁止选中按钮中的文字
user-select: none
5. 优化跳转
对于所有路由跳转按钮，建议都使用 <a> 标签，并且内置 href 属性，填写跳转的路由地址
1. 零内容展示
考虑两种情况：数据为空 或 出现异常，开发者要考虑到这两种情况，并给用户响应的反馈。
2. 关于图片
建议设置宽高，防止图片大小不同导致布局失效。
3. 优化cursur
对于不同场景，给不同的cursur
4. 添加进制选择
比如禁止选中按钮中的文字
user-select: none
5. 优化跳转
对于所有路由跳转按钮，建议都使用 <a> 标签，并且内置 href 属性，填写跳转的路由地址
展开
评论
点赞
7月24日打卡，今日学习《前端优秀实践不完全指南》：
1. 充分考虑布局
一般有两种布局方式：全屏布局和定宽布局。定宽布局很简单，只需确定宽度后设定剧中即可。现代网页更多为全局布局，可以根据客户端分辨率大小自行调整缩放，一般使用flex布局完成。Footer的布局也有很多方式，本文作者推荐使用flex布局实现。
2. 处理动态内容，解决文本超长
当展示从后端发送过来的数据时，要谨慎，说不定返回过来的文本就会超长，超出显示范围。因为无法控制后端的数据，就只能在布局上进行打点，进行限制，常用方法是将超出部分显示为省略号。
{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
3. 处理动态内容， 保护边界
当一个容器，比如按钮要存放的字符串长度不同时，无法确定一个统一尺寸，此时借助padding就可以很好的完成自适应。
1. 充分考虑布局
一般有两种布局方式：全屏布局和定宽布局。定宽布局很简单，只需确定宽度后设定剧中即可。现代网页更多为全局布局，可以根据客户端分辨率大小自行调整缩放，一般使用flex布局完成。Footer的布局也有很多方式，本文作者推荐使用flex布局实现。
2. 处理动态内容，解决文本超长
当展示从后端发送过来的数据时，要谨慎，说不定返回过来的文本就会超长，超出显示范围。因为无法控制后端的数据，就只能在布局上进行打点，进行限制，常用方法是将超出部分显示为省略号。
{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
3. 处理动态内容， 保护边界
当一个容器，比如按钮要存放的字符串长度不同时，无法确定一个统一尺寸，此时借助padding就可以很好的完成自适应。
展开
评论
点赞