欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  资讯频道

20个增强网页兼容性设计的实用工具分享

程序员文章站 2022-05-21 15:20:46
...
互联网时代,人们利用各种设备上网:笔记本电脑、上网本、平板电脑、智能手机,甚至电视机。这些设备的屏幕和问题解决方案都各不相同,因此很难创建一个适用于所有设备的网站。

不过,还是有解决方法的。兼容性设计就是为适应不同尺寸屏幕的整改设计。如果你想增强网页兼容性,你就需要应用一些工具。本文为你介绍20个实用的增强网页兼容性设计的工具。

1. Golden Grid System

20个增强网页兼容性设计的实用工具分享


Golden grid system是为增强网页兼容性设计的折叠式grid。具有四个特征:列、跨页、底线、script。

2. Lettering.JS

20个增强网页兼容性设计的实用工具分享


Lettering.js是一个针对网页排版的jQuery插件,具有如下功能:字距调整、编辑设计、代码管理、完全可操控。

3. FitText

20个增强网页兼容性设计的实用工具分享


FitText可随意调整字体大小。使用这款插件可以突出标题,使整个布局主次分清。

4. Fluid 960 Grid System

20个增强网页兼容性设计的实用工具分享


Fluid 960 Grid System的模板是在Nathan Smith的成果的基础上创建的。它延续了MooTools和jQuery JavaScript库的效果。

5. Gridless

20个增强网页兼容性设计的实用工具分享


Gridless可使用户轻松应对兼容性网站。它是一款应用HTML5和CSS3的插件,可实现跨浏览器的良好排版。

6. Skeleton

20个增强网页兼容性设计的实用工具分享


Skeleton是应用CSS和JS,应用它可以快速开发网站。无论是17寸的笔记本电脑还是iPhone,看起来效果都很不错。

7. Responsive Design Testing

20个增强网页兼容性设计的实用工具分享


只需输入网页地址,就可以在任何尺寸的浏览器上测试。

8. PX to EM

20个增强网页兼容性设计的实用工具分享


这是一个根据EM需求设计的计算工具。用户只要选中相应的PX字体,就可以转化为相应的EM大小的字体。

9. BluCSS

20个增强网页兼容性设计的实用工具分享


BluCSS是一个简便易记的CSS框架。可轻松应用在项目中。

10. Seamless Responsive Photo Grid

20个增强网页兼容性设计的实用工具分享


假设用户想同时展示很多图片,而且要求图片间无缝连接。Seamless可以轻松满足你当需求。

11. SimpleGrid

20个增强网页兼容性设计的实用工具分享


SimpleGrid适用4个尺寸的屏幕:720px、大于720px、大于985px、大于1235px。这就意味着访问网站时,可根据浏览器调整屏幕大小。

12. Adapt.js

20个增强网页兼容性设计的实用工具分享


Adapt.js是一个很小的JavaScript文件,它能够根据页面的宽度来加不同的CSS文件。在浏览器渲染一个页面之前,它会检查其宽度然后决定该调用哪一个CSS文件。

13. Fluid Images

20个增强网页兼容性设计的实用工具分享


14. Convert a Menu to a Dropdown for Small Screens

20个增强网页兼容性设计的实用工具分享


本文介绍当浏览器窗口很窄时,右上方的菜单栏会从常规的连接行转变为下拉式菜单的实现办法。

15. resizeMyBrowser

20个增强网页兼容性设计的实用工具分享


resizeMyBrowser是一款不错的网页兼容性测试工具,让用户轻松重置浏览器大小,一站式体验时下最流行的尺寸或个性化定制。

16. Responsive Table

20个增强网页兼容性设计的实用工具分享


所谓兼容性设计就是为适应不同尺寸屏幕而进行的整改设计。

17. Columnal

20个增强网页兼容性设计的实用工具分享


Columnal融合了标准代码和个性化代码。它的部分代码借鉴于cssgrid.net,还有些代码灵感则来自于960.gs。Columnal轻松解决网页设计兼容性问题。

18. 1140 CSS Grid

20个增强网页兼容性设计的实用工具分享


它与1280的显示器完美匹配。针对小的浏览器,它能够自动调节,使适应需求。

19. Mobilize.js

20个增强网页兼容性设计的实用工具分享


它是应用HTML5和Javascript框架实现网页移动化的工具。同时它能自动检测移动浏览器,另外它还支持iPhone、Android、Blackberry、Opera Mini等很多其他浏览器及设备。

20. Adaptive Images

20个增强网页兼容性设计的实用工具分享


它可将图像传输到小型移动设备上。应用嵌入式解决方案会自动创建、捕捉、传输图片,而不需要额外改动图像。

Via designwoop
相关标签: 网页兼容 web