这是一个创建于 596 天前的主题，其中的信息可能已经有所发展或是发生改变。
近一个月每次放假都在写前端页面，有点折磨自己。Web 页面的样式是真的难调，尽管已经在依靠组件库 + TailwindCSS 和 GPT 帮忙了。
写完一个小东西，换了一种分辨率发现样子又变了，或者是切换成移动端发现又哪里歪了，想要适配不同的分辨率和屏幕大小真的不容易。又或者是发现一个样式不对劲，不知道怎么找到它（组件内部的，找起来有点麻烦，也不好全局覆盖），或者是找到了也不知道怎么调整。以后再也不想评价别人写的咋样了，因为自己写起来确实费劲。我确实得找点资料（书）去好好学学，但我很好奇大家都是怎么做的？
今天中午起床后，一下午又在画样式，在这个 PR，大家也不妨告诉我，是不是我学习方法有什么问题？
 |
1
zcf0508 2023-04-05 20:42:09 +08:00 via Android  1
你需要先做好设计，再开始写代码，特别是需要适应屏幕分辨率的，要按照断点设计多个版本。用 tailwind 是移动端优先的，所以先实现小屏再往大屏调整。
|
 |
2
liyang5945 2023-04-05 20:47:57 +08:00
先学习 css 的基本知识吧，文档流，盒模型，定位，flex 布局，学会这些东西就发现布局什么的都是小菜一叠，我当初是看一个培训机构的前端教学视频学的，css 的课程不多，快的话一两周就能学会
|
 |
3
CLMan 2023-04-05 20:54:51 +08:00 5
前端包括设计和实现(开发)，虽然有全栈的概念，但是真正能精通前后端开发的少之又少，精通前后端开发而且精通设计的更是凤毛麟角。
应试教育使得很多人缺乏基本的审美细胞，这个没法补课了。 我也曾经焦虑过，因为练习 web 项目就要涉及前端，而前端部分往往让我心里交瘁。后来我就直接爬别人的网站，只练习后端部分。 Material Design,Ant Design 之类的库也能帮助非前端人员节省开发的脑细胞。 总之，专业的领域交给专业的人来做，别自己硬着头皮浪费大量精力去做，你也学不到什么。 |
 |
4
crysislinux 2023-04-05 21:05:48 +08:00 via Android
要做的协调好看确实比较难。抄别人的最简单。
|
 |
5
jones2000 2023-04-05 21:08:43 +08:00
设计难， 实现就是一个体力活。
|
 |
6
levelworm 2023-04-05 21:14:54 +08:00
别做这种事情了，专心做 CLI 的工具，专心做程序员要用的工具，这种面向普通人的东西还是交给其他人来弄。。。
|
 |
7
daweiba 2023-04-05 23:46:50 +08:00
找个 UI 框架，改巴改巴
|
 |
8
Aloento 2023-04-05 23:47:58 +08:00
设计... 我一般就是先想点子，然后高保真，然后实现，然后优化
|
|
9
Aloento 2023-04-05 23:48:42 +08:00
然后，我超，原
|
 |
10
kongkx 2023-04-06 07:32:08 +08:00 via iPhone 1
需要补点 css 相关的知识，响应式以及优先级机制，了解网页 layout 的特性。 看了一个 commit ，好像不少 !important ，跟“行内样式” ，这样很容易搞死自己。
|
 |
11
jeffw 2023-04-06 08:26:40 +08:00
如果没要求，我现在只都做电脑版，手机平板的屏幕那么大，又不是不能用。。
|
 |
12
vsitebon 2023-04-06 08:56:57 +08:00 1
虽然我可能不清楚 vue 的语法是怎么实现的，但是我看了一下可以改进的首先是，如果采用了 Tailwindcss 那么尽可能不要再单独将某一个样式放在 style 里面，而是通过控制 class 来控制，例如：“:body-style="{ padding: '1rem' }"” 这种
|
 |
13
superedlimited 2023-04-06 09:09:12 +08:00 via iPhone
用 tailwindcss 的前提是比较熟练掌握 css 。你 css 还不熟，就靠什么 chat 狗屁通帮你写，还 tailwindcss ，r u fucking 搞笑的么？
|
 |
14
debuggerx 2023-04-06 10:01:18 +08:00 2
响应式设计和实现本就不那么容易，别说跨专业来写的了，就是大公司的产品，真正能做好的也没几个，国内尤其严重，还自作聪明得整出各种“屏幕适配方案”的歪路把人带偏……
想做好响应式，需要足够的理解和认知，再加上各种技巧和套路的积累，所以不光得掌握常见的布局和样式知识，还需要看一些成体系的设计语言指导，比如 MD 的文档： https://www.mdui.org/design/layout/responsive-ui.html MD 好不好看见仁见智，但是它最少是一套系统的有足够理论支持的设计语言，相反很多 xxxDesign 、xxxUI ，本质不过是一些方便开发的 UI 组件库而已。 其次就是多留意好的设计实现，学习那些思路和技巧。一般是国外的网站和应用出现的概率会高一点。 再贴几个刚查到的链接： https://www.invisionapp.com/inside-design/examples-responsive-web-design/ https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design https://web.dev/responsive-web-design-basics/ (我看还有几个大聪明说前端简单的[狗头]) |
 |
17
YouMoeYi 2023-04-07 02:37:11 +08:00
某些人戾气不要太大😅 多分辨率多端 UI 的响应式设计本身就不那么好做
|
 |
18
js8510 2023-04-07 04:28:45 +08:00 1
做个 UI 真的很难。。开始时候独立还发还想着我要做好看，我要设计一下，我要响应尺寸变化。后来直接放弃，遵循能用就行的原则。
其实经过漫长的独立开发最终上线，多数情况是完全没有流量。如果成功了，UI 还有机会改。 |
Select Language