1. 首页
  2. css

CSS#044:RealEmulator上的响应调整

←上一段视频下一段视频→
将桌面浏览器压缩得非常窄,可以让您对响应式设计的工作原理有一个模糊的认识,但这并不是实际小屏幕设备的准确表示。而真正的小屏幕设备正是我们在这里设计的,而不是其他好奇的设计师挤压他们的浏览器>
在这个屏幕上,我们打开了iOS模拟器(Mac上的XCode是免费的),并根据我们在那里看到的做了一些设计调整。根据我的经验,模拟器非常精确到你在真实设备上看到的东西。不过,我也看到了不同之处——比如内存使用。就在这个网站发布之后,我看到了移动webkit的崩溃,而这并不是在模拟器中发生的。
我们要做的一件事是在最窄的媒体查询中删除3D堆叠纸张效果。我们还发现,标题中的广告在移动设备上造成了一些水平滚动,这是我们在移动设备布局中不希望看到的事情。幸运的是,我们能够马上找到它,但有时这些东西很难找到,你只需隐藏身体上的overflow-x,我们最终在这里做了。
我们调整一些字体大小较小的屏幕以及。

CSS#044:RealEmulator上的响应调整 为WP2原创文章,链接:https://www.wp2.cn/css/css044realemulator%e4%b8%8a%e7%9a%84%e5%93%8d%e5%ba%94%e8%b0%83%e6%95%b4/