前端开发的工程中一般都要考虑到不同的电脑分辨率的问题,由于这段时间我也遇到了这个问题,今天进行一下相关的总结。
一、不同的页面调用不同的CSS文件
这个方法给人的第一感觉可能比较繁琐冗杂,其实实际工作量并没有看起来的那么大。
页面的整体样式肯定基本上是相同的,不同的浏览器我们要做的只是对页面中的元素的位置、大小等进行细微的调整;
整个的页面样式设计已经完成了,其他的直接复制整体样式进行相应调整即可。不过,如果页面过多的话不建议采用这种方法。
二、CSS 多媒体查询(@media)
定义和使用
@media 查询,可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
CSS 语法
(可参考菜鸟教程:https://www.runoob.com/cssref/css3-pr-mediaquery.html)
mediatype :媒体类型 media feature:媒体功能
@media mediatype and|not|only (media feature) {
CSS-Code;
}
示例:
浏览器宽度大于411px 且 小于等于1024px时应用的login类样式:
@media screen and(min-width: 411px)and(max-width: 1024px) {
.login{
color:red;
}
}
媒体功能:
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
三、JS/jQuery动态设置
这种方法适合需要调整的页面中元素比较少的情况;
常用的方法有:
1.获取屏幕的尺寸:包括宽度、高度、分辨率
html:
<html>
<div id="aa" ></div>
</html>
js:
var w=screen.width;
switch (w){
case 411:
$('#aa').attr('height',343);
break;
case 1024:
$('#aa').attr('height',700);
break;
}
注意,若设置的属性属于css还是div的,如果只属于css,可能写法方面也会有影响,有时间再写一篇详细区分;
另一种写法: $("#aa").css("height",300)
四、使用前端框架
现在针对不同浏览器的分辨率显示问题,涌现了诸多前端框架,其中比较有名的Bootstrap (官网:https://www.bootcss.com/)是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。
全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
此外,Bootstrap还开发了一些常用前端控件,如轮播、导航栏、进度条等等。
Bootstrap的学习也较为简单,学会后可以很简单的进行前端工程开发,容易上手,方便省事。
Bootstrap(及其他同类前端框架)必定是前端开发的趋势。