-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
从安
2019-06-18
来源 ：
阅读 1132
评论 0
摘要：本篇文章主要讲述HTML+CSS入门之轻松掌握前端常见的适配方式的方法，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
本篇文章主要讲述HTML+CSS入门之轻松掌握前端常见的适配方式的方法，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
作为一个真正的前端工作者适配是一个老生常谈的问题，那么今天给大家总结一下在工作当中常用做适配的方式。
一、固定布局（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 ">
本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
