【云速建站】按照浏览器大小适配网页

举报
JohnnyKou 发表于 2019/01/12 15:22:09 2019/01/12
【摘要】 几个可以实现页面跟随浏览器大小适配的tips

首先我们明确一下,一张1200X800的图,无论多么神奇的适配页无法适配在320X240的页面。

按照下面几个tips可以实现页面针对浏览器大小变化适配

1. 如果仅显示图片,可以使用unslider插件或者bslider插件,如下图这两个插件和通栏一样,可以超出编辑区左右占满屏幕,当改变浏览器大小的时候这里的图片也会努力适配

image.png

2. 对于容器插件,代码插件等,需要将它们与编辑区边界对其,占满。这样里面的内容会根据浏览器大小适配

image.png

3. 如果想去除两边的留白,可以增加通栏组件,并对通栏使用颜色相近的背景图,再将容器或代码模块放在通栏中。

image.png

背景可以使用颜色,或者图。(图片大小尽量小,否则影响页面加载速度)

image.png

下图用代码模块举例,将代码模块放入通栏

image.png

将3D展示商品代码放入代码插件 (素材引用自www.weshape3d.com

image.png

保存,预览效果

实现后可针对浏览器大小变化实现适配,参考效果如下: http://www.fallout5.club/autoscale

调整之前

image.png

调整之后

image.png

浏览器缩小60%后显示效果

image.png

浏览器左右变窄后显示效果

image.png

但是如果太小就像文章开头说的那样,显示不下了。


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。