软糖vi设计的核心价值在于为企业打造独特的品牌,软糖vi设计可以给企业带来良好的社会声誉和经济效益。
320,768和1024。这些数字对你有什么意义吗?
不,这不是达芬奇密码,这是许多设计师将手机、平板电脑和桌面屏幕宽度联系在一起的像素宽度。
我遇到的问题是,我的手机不是320像素宽,我的平板电脑不是768像素宽,我的桌面屏幕肯定不是1024像素宽。在各种不同的设备上有数百种不同的屏幕尺寸,然而我们仍然认为响应式网页设计是320、768和1024。
介于两者之间的所有屏幕尺寸会发生什么变化?
我见过许多网站在设计中使用这三个断点,并简单地创建三个静态布局,以最近的宽度为中心。
这比一个老式的、静态的、只有桌面的网站要好,因为他们至少提供一个专栏,一个手机的简化版本和一个平板电脑的友好版本,但是你为什么不考虑其他屏幕尺寸而疏远它们呢?
当然,这种设计在其他尺寸上仍然有效,但是当你有一个小于768的平板电脑时会发生什么呢?他们将在一张桌子上获得移动体验!在小于1024的笔记本电脑上看呢?我们会把平板电脑的布局发给他们,嘲笑他们没有我们认为值得拥有的3种屏幕尺寸之一。
这是百分比而不是像素
当你创建你的响应式布局时,你的目标应该是尽可能多地用百分比来设置你的尺寸。这有助于确保您的内容在不同的屏幕尺寸下均匀地放大和缩小,并且与正在观看的设备成比例。这种方法还将确保您的内容总是填充屏幕的90%(或您确定的大小),而不是屏幕的50%,因为内容以比下一个可用断点小几个像素的屏幕大小为中心。
内容为王
当选择断点时,你应该总是根据内容的断点而不是设备的屏幕宽度来做决定。与其创建一个设计,然后修改它以舒适地适应苹果平板电脑屏幕,你应该找出你的内容开始挣扎的宽度。
我倾向于从1400宽的设计开始,慢慢地把浏览器变小,直到一部分内容打破布局或者接近布局。这决定了我的下一个断点。不管是1200、800还是673,如果内容仍然有效,为什么要改变布局呢?
你会发现,你会以奇怪的断点结束,比如477或982,你可能有2,6或10个不同的断点。关键是内容将决定而不是你想要的屏幕大小。
随着不同设备和屏幕尺寸的阵列每月发布,不可能为我们的响应项目确定一组明确的断点。事实是,当我们使用屏幕宽度等变量来确定我们的响应布局时,我们将努力为每个不同的尺寸提供一个完美的布局,但是通过遵循上面的一些提示,我们至少可以确保内容总是尽可能最好地显示。
你通常使用什么断点?你会完全避免断点吗?请在评论中告诉我们。
特色图像/缩略图,通过快门架广泛加载图像。
总监微信咨询 舒先生
业务咨询 张小姐
业务咨询 付小姐