PC端页面适应不一样的分辨率的方法 （转载）
原文地址：http://www.javashuo.com/article/p-hmplckwq-dx.htmlcss
上周完成一个PC端的项目，对于我这样的小白来讲，这个项目里面最大的问题就是，如何作到让HTML页面适应电脑的不一样分辨率。
经过师傅的指导和本身查阅资料，最终成功适配不一样的分辨率，完成了这个项目。
如今回头再来看这个项目，忽然发现适配不一样的分辨率真的很是简单。这里总结两种方法，跟你们分享一下。但愿能够帮助你们快速完成本身的项目。浏览器
一.根据不一样的分辨率，加载不一样的CSS样式文件框架
这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，建立不一样的css文件。而后在各类分辨率下，写css样式表。学习
可能你会感受针对一个页面，要写这么多不一样的css样式表，这个工做量确定很大。其实也不尽然，根据我在这个项目中的实践，发现这个工做量实际上是比较小的。spa
首先，咱们在作项目的时候，通常状况下会有一些范围限制，好比这个项目只须要适配1280~1920分辨率便可。并且各个分辨率之间，咱们有的时候只是对页面上的元素进行宽高、尺寸、位置等进行调整，总体的一个框架是类似或者说是相同的。.net
不只如此，有的时候项目的要求不高，没有比较1:1高度还原设计稿，那么这个时候，咱们在1440分辨率下的样式表，在1280分辨率下也是适用的，这个时候，咱们的工做量又进一步减小。设计
这个时候，咱们能够先完成一个分辨率下的css样式表。而后在这个基础之上，对其余分辨率进行调整便可。这个过程咱们只须要调整一些参数便可。blog
好比在个人项目里面，这对不一样的分辨率，我只作了三个样式表教程
这个时候，咱们只须要在咱们的HTML页面的<head></head>标签中，使用js，根据不一样的电脑分辨率，加载不一样的css样式表。注意这里的js必定要写在<head></head>标签里面，这样在加载页面内容以前，能够提早把css样式表加载出来ip
<script>
// 分辨率大于等于1680，大部分为1920的状况下，调用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率再在1600-1680的状况下，调用此css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 分辨率小于1600的状况下，调用此css
else{
document.write('<link rel="stylesheet" href="css/index.css">');
}
</script>
这样的话，就能够根据不一样电脑的分辨率，就在不一样的css样式表。由此咱们便完成了页面使用不一样的分辨率。
二.采用媒体查询
媒体查询是CSS3的新特性，绝大多数浏览器均可兼容这一特性。这个方法的思路也是根据不一样的分辨率，应用不一样的css样式。
若是你对媒体查询不熟悉，能够点击连接进行学习这一新特性。菜鸟教程-CSS3 @media 查询
这个思路和和方法一差很少，或者说方法一的思路和这个思路差很少，毕竟这也是官方的作法。咱们有两种使用媒体查询的方式。
1.根据不一样的分辨率，引入不一样的css样式表
这个方法和方法一相同，也是经过判断电脑的分辨率，来引入相对应的css样式表。
<!-- 分辨率低于1280，采用test-01.css样式表 -->
<link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css">
<!-- 分辨率高于1400，采用test-02.css样式表 -->
<link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">
2.在同一个css样式表中，根据不一样的分辨率，写不一样的css样式
这个方法只有一个css演示表，在这个样式表里面，根据不一样的分辨率，写不一样的css样式。
<style media="screen">
/*分辨率低于1280，采用下面的样式*/
@media screen and (max-device-width:1280px){
div{
width: 200px;
height: 200px;
}
}
/*分辨率高于1440，采用下面的样式*/
@media screen and (min-device-width: 1440px){
div{
width: 300px;
height: 300px;
}
}
</style>
三. 总结
以上的方法的思路大同小异，根据我本身的经历，给你们提出一些小的建议。
由于我在公司的电脑的分辨率是1440，因此一开始我实在1440分辨率下写得css样式表，而后在这个基础之上，去调整其余的分辨率。发现根据小分辨率样式去调整大分辨率样式比较简单。固然，也许你喜欢由大到小，这都无所谓，看我的兴趣。
--------------------- 做者：fengzhenzhen8023 来源：CSDN 原文：https://blog.csdn.net/fengzhen8023/article/details/81281117
- 1. PC端页面适应不一样的分辨率的方法
- 2. pc端前端页面适应不一样分辨率的问题
- 3. PC端适应屏幕分辨率
- 4. pc端px转换为rem针对屏幕分辨率进行页面适配
- 5. 移动端不一样分辨率适配--使用flexible
- 6. 前端页面如何适应不一样屏幕分辨率经常使用作法
- 7. pc端页面的适配
- 8. Vue实现PC端分辨率自适应
- 9. Android 自适应不一样分辨率屏幕
- 10. ** PC端兼容各种分辨率的简便方法 **
- 更多相关文章...
- • 屏幕分辨率 统计 - 浏览器信息
- • 高屏幕分辨率 统计 - 浏览器信息
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • 常用的分布式事务解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。