前端常见的适配方式的方法
2019-05-22 06:29:38来源：博客园 阅读 ()
作为一个真正的前端工作者适配是一个老生常谈的问题，那么今天给大家总结一下在工作当中常用做适配的方式。
一、固定布局（pc端）（静态布局）
以像素作为页面的基本单位，不管设备和浏览器宽度，只设计一套尺寸
二、根据不同根据不同的分辨率，加载不同的CSS样式文件（可切换的固定布局）自适应布局
1、<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>
注意：注意这里的js一定要写在<head></head>标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来
2、媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
css3
必须设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
viewport：视口
width=device-width:就将布局视口设置成了理想的视口。
initial-scale：[0,10] 初始缩放比例，1表示不缩放
maximum-scale：[0,10] 最小缩放比例
maximum-scale: [0,10] 最大缩放比例
user-scalable: yes／no 是否允许手动缩放页面，默认值为yes
语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
第一种方法是css2媒体查询用法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，
我们一般用第二种方法CSS3把样式都写在一个文件里面才是最佳的方法。
但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
三、rem布局（弹性布局）移动端
rem(font size of the root element)是指相对于根元素 (html)的字体大小的单位。
1、媒体查询结合rem布局
媒体查询动态修改根元素的大小，使得rem 一直在跟着变化，响应式就成功了。
为什么使用媒体查询结合rem布局
一个物体在一个超大空间中显得很小，但是在小的空间存放不下，为使得页面布局不管在什么设备上都是正常，协调的情况，就会采用媒体查询 + rem，来根据不同的设备去相应的改变元素的大小。
媒体查询结合rem布局的缺点
计算起来太繁琐
2、flexble.js和rem布局：
用法：首先在页面导入flexible.js导入<script src="js/flexible.js"></script>去掉mete标签（禁止缩放）的设置
当设计图为750px；从设计图量出header为88px；
css设计为header的height 88/100=0.88rem;
3、rem+VW布局
必须设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
为了方便计算可把html中font-size设置成100px；但是100px固定大小不会自动适配。所以把100px转换成vw
100px=?vw等于他的视口宽度
假如：设备：640px dpr：2 320px
因为 100vw=320px
所以 1vw=3.2px；
所以 100px=31.25vw
假如 设备750px dpr为2 375px
因为 100vw=375px；
所以 1vw=3.75px；
所以 100px=26.67vw
当设备640px ：31.25vw
当设备750px ：26.67vw
注意文字要单独设置单位为px，否则文字为100px太大，要用媒体查询的方式改变文字大小。
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
四、百分比布局 (流式布局)
以百分比作为页面的基本单位，可以适应一定范围内所有的尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果
五、混合式布局
同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位
六、响应式布局
1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
响应式页面在头部会加上这一段代码：
<meta name="applicable-device" content="pc,mobile"> <meta http-equiv="Cache-Control" content="no-transform ">
原文链接:https://www.cnblogs.com/ray123/p/10890745.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：前端之CSS2
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-02
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
