关于我们
  
新闻详情 News details
   
    新闻资讯
    联系我们
做网站响应式网站应设计不同版本的设计，然后根据设备提供不同的CSS样式
来源:做网站 | 作者:hzlpkj | 发布时间: 2019-08-10 | 477 | 分享到:
　响应式网站的设计是一致的，但设计草案应考虑屏幕在几小时内的变化。例如，如果您的网站有5个块和4个间隙，并且在将宽度减小到900时需要更改宽度，则这是一个自适应布局。
栅格化您的网站使其看起来更加方正适应视网膜屏幕

　　2012年，Apple推出了Retina Macbook Pro，Retina屏幕上的电脑数量也在不断增加。 Retina屏幕只是意味着屏幕密度是传统屏幕的两倍。它也被称为视网膜屏幕，因为它可以满足我们视网膜的感知。在这种屏幕上，我们设计了一个安全距离约为1000像素的网站。

所以现在如果你在Retina屏幕下面显示一个400X300PX区域，你需要给前端一个800X600PX的剪切图像，因为Retina屏幕实际上高于2个像素。我们的用户是视网膜屏幕的更多用户，例如设计师团体。

　　首先，您需要使用视网膜屏幕的大小完成设计草图，这是原始设计草稿的两倍。然后切出两组切割图表（如果你加载一个双倍尺寸的资源，即使对于非Retina屏幕也会很慢）。

常见的切割图名为logo.jpg，Retina切割图名为logo@2x.jpg。前端由代码标识，如果屏幕是Retina，它将以两倍大小加载，否则将以标准大小加载。可以使用Retina.js（https://retinajs.com/）提供的技术识别前端。

　　自适应响应网站
　　使用计算机，手机或iPad导航时，有些网站会有很好的体验。为此，您需要为您的环境创建自适应或响应式站点布局。响应和适应的原则是相似的。它们都在代码中以检测设备的屏幕宽度并根据不同的设备加载不同的CSS。响应网站

　　响应式网站的设计是一致的，但设计草案应考虑屏幕在几小时内的变化。例如，如果您的网站有5个块和4个间隙，并且在将宽度减小到900时需要更改宽度，则这是一个自适应布局。例如，像Station Cool和Dribbble这样的网站采用了自适应布局。

　　响应网站
　　响应式网站应设计不同版本的设计，然后根据设备提供不同的CSS样式。

例如，如果设备宽度为750px，则网站知道用户正在使用手机访问它，获取手机的样式，如果是计算机的宽度，则它获得计算机的CSS样式。对于设计人员来说，可以自适应地考虑各种设备宽度的网站的可分割性和布局。


响应式设计需要为计算机，平板电脑，移动电话等设计至少三套设计图纸。简而言之，适应性和响应性都是试图适应用户体验的浏览设备的网站。