除了页面的布局是我们设计的重点之外,网站上展示的图片和文字也是我们不能轻视的内容。
一个真正具有响应性的网站设计是完全适应你的访问者的设备你的网站。我们需要在响应式布局页面上提供的上下文图像大小。如果是背景图片,我们可以准备多张不同大小的图片,然后在相应的媒体查询样式中使用相应的图片背景。然后结合小宽度小高度宽度高度等样式属性来限制窗口的小或宽度和高度,模拟响应和流式布局,以确保图片不失真。如果要以HTML格式加载图片,实现不同分辨率屏幕上图片的自适应,当然可以通过设置图片样式的百分比来实现。但是,它不仅包括缩放,而且还减少您发送给观众的图片。例如,如果用户在移动设备上浏览你的网站,网速很慢,流量很低等因素都可能被访问者抛弃你的网站!如果网站上的大多数数据元素都是图像。为了减少这些元素对我们网站的影响,我们可以用更适合我们的访问者使用的设备的图像替换数据。为了在开发中解决这个问题,可以使用一些JavaScript插件
响应式设计应坚持内容,移动的设计原则。然后我们知道网页的内容主要由文字图片等元素组成,那么文字应该如何回应呢排版是响应式网页设计的重要内容之一。如果您希望内容友好地显示在所有大小的屏幕上,则必须优化移动设备的字体。我们不能忽略指定字体以适应我们的响应网站。我们可以使用非单位标准来实现这一点,包括像素EMREM或百分比。因此,选择一个合适的标准对于设计一个塑料和响应界面是非常重要的。
很久以前,像素就被用作网页设计的一个单元,因为它固有的准确性和准确性。一旦字体被指定了一个特定的值,它将在所有设备和浏览器中保持相同的大小。虽然这种方法提供了非常准确的尺寸控制,但它违背了我们需要的弹性和响应。当您调整父元素的大小时,维度通过继承传递给子元素(这就是为什么CSS被称为层叠样式表的原因)。例如,将固定像素值设置为正文的字体大小,然后将该值传递给设计的所有其他元素。此时,如果开发人员要单独指定样式,则必须手动设置不同的参数以覆盖现有样式。因此,基本编辑和调整需要仔细修改所有预设样式。这不仅会造成不方便的问题,而且会在各种浏览器和设备上显示不友好的问题,其中许多问题是由选择字体大小引起的。在特定字体大小的情况下,许多读者都会遇到阅读障碍,这是必须避免的,特别是考虑到我们响应式设计的目标是在所有屏幕大小和窗口中显示良好。如果采用尖端的设计方法,准确的像素单位不是选择。现在,设备有多种屏幕尺寸,即不同像素宽度和高度的屏幕。使用一定大小的字体来适应所有的屏幕是不符合我们的响应设计的。