我有一个适用于 PC 屏幕浏览器的网络应用程序 (@media screen{}),我想让它对智能手机屏幕友好。
不幸的是,我的 12pt 字体和 128x128 图片在分辨率为 1280x800 的智能手机(Samsung-Google Nexus)中显得非常小。
在为像我这样的智能手机添加 CSS 之前,要为各种智能手机屏幕分辨率创建 Web 应用程序,我必须记住什么?
我有一个适用于 PC 屏幕浏览器的网络应用程序 (@media screen{}),我想让它对智能手机屏幕友好。
不幸的是,我的 12pt 字体和 128x128 图片在分辨率为 1280x800 的智能手机(Samsung-Google Nexus)中显得非常小。
在为像我这样的智能手机添加 CSS 之前,要为各种智能手机屏幕分辨率创建 Web 应用程序,我必须记住什么?
你可以尝试在css中添加这个:
<meta name="viewport" content="width=device-width, user-scalable=false;">
来自:https ://developer.mozilla.org/fr/docs/Mozilla/Mobile/Viewport_meta_tag
关于视口的历史,我不确定....
创建响应式网站的方法有很多——响应式、专为移动设备设计和移动优先。然而,如今,我们更多地考虑Mobile First!
. 因此,有许多网站教您如何创建响应式网站和移动优先方法,例如:
构建响应式网站时首先要考虑的是简单性。网页设计师喜欢炫耀他们可以设计出一个网站。他们爱上了他们的代码和它可以做的所有很酷的事情。
关于响应式设计的 10 个基本技巧
- 保持布局简单
- 使用媒体查询
- 定义断点
- 使您的布局灵活
- 让你的照片表现得很好
- 不要忘记 make 和 min
- 让大多数事情相对
- 当移动线性化
- 跳过非必要内容
- 检查您的元视口
您可以在Dan Rowinski 的文章中查看更多信息。这是一篇很好的文章来回答您的问题,即在创建响应式 Web 应用程序之前您必须思考的问题。