前端-pc端适配

响应式布局方案
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端–而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

一、弹性布局
二、
1.在网页代码的头部，加入一行viewport元标签
适配设置：

如果任何设置都没有，默认走的就是viewport的默认设置

去设置新的viewport设置,达到适配要求。

设置视口的标签在head里面并且应该紧接着编码设置

viewport的功能：

width 可以设置宽度 (device-width 当前设备的宽度)
height 可以设置高度
initial-scale 可以设置默认的缩放比例
user-scalable 可以设置是否允许用户自行缩放
maximum-scale 可以设置最大缩放比例
minimum-scale 可以设置最小缩放比例

在 content="" 使用以上参数

width=device-width 宽度一致比例是1.0
initial-scale=1.0 宽度一致比例是1.0
user-scalable=no 不允许用户自行缩放（yes，no 1,0）

标准适配方案：

meta:vp + tab 快捷方式

viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。


<!--[if lt IE 9]> 　　　 　
    <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js">
    </script> 
<![endif]-->

（2）X-UA-Compatible

X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

#IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=7">

#IE浏览器，IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8">

#IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">

#IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。

这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器，而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

3.：CSS的@media规则，选择性加载CSS
媒体查询使用方法：
https://www.jb51.net/css/627121.html

4.不使用绝对宽度，字体大小
（1）width:auto; / width:XX%;

（2）字体大小是页面默认大小的100%，即16像素。字体不要使用绝对大小"PX"，要使用相对大小“REM”

html{font-size:62.5%;} 
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

5.图片自适应
"自适应网页设计"还必须实现图片的自动缩放。

img, object {max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img {width: 100%;}

windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令

img { width:100%; -ms-interpolation-mode: bicubic;}

或使用js–imgSizer.js

addLoadEvent(function() { 　　　　
        var imgs = document.getElementById("content").getElementsByTagName("img"); 　　　　      imgSizer.collate(imgs); 　　
});

https://www.jianshu.com/p/d44f2015f179

https://www.jianshu.com/p/6afd596440bb

https://blog.csdn.net/weixin_41830601/article/details/79908597

https://www.jianshu.com/p/d39bdeeaa8fe

https://blog.csdn.net/jinlei996105/article/details/86492596?utm_source=distribute.pc_relevant.none-task

https://www.cnblogs.com/zhangyongl/p/6154981.html

https://blog.csdn.net/sunshine940326/article/details/55194861?utm_source=distribute.pc_relevant.none-task
天猫
内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。
注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕；
淘宝
内容区也是采用了媒体查询+定宽；
达到某个节点之后隐藏某些元素：
微博
页面主体定宽，当小于1007的时候，把侧边栏隐藏，内容区本身是定宽。
亚马逊
很多宽度和高度是js动态计算赋值。

sara-

发布了45 篇原创文章 · 获赞 4 · 访问量 1047

私信关注

猜你喜欢