PC端网站转移动端（自适应）布局不同屏幕展示不同CSS

随着移动端的发展网站越来越多已经是响应式布局，或者有的直接生成APP 或者微信小程序了对吧！

枫瑞博客在接受本篇文章的时候首先给大家说大家一直疑惑的问题那就是响应式和自适因的区别

简单的说：

相同点：他们的原理是相似的，都是根据不同的设备采用不同的css，而且css都是采用的百分比的
不同点：响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式。
自适应不会，所有的设备看起来都是一套的模板，不会根据设备采用不同的展示样式。

普通的说：

响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
响应式布局的一些技术点纪录：
(1)允许网页的宽度自动的调整
(2)尽量少使用绝对的宽度，多点百分比
(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
(5)选择加载css，<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 400px)” href=”tinyScreen.css” />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

==如果无法理解没啥关系因为本质都是差不多的，如果你一定在纠结这个牛角尖那么你可以了解下《静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别》相信你会想起前面的那句话

为了能够清楚的了解枫瑞博客会制作视频

0x1 给head添加

<meta http-equiv="Cache-Control" content="no-transform" /> 
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

no-siteapp和no-transform是告诉搜索引擎不要把网页转码第三个meta，声明网页可以缩小放大。

0x2 添加头部style样式

<style type="text/css"> 
@media(max-width:760px)
{
  你修改修改的样式内容
}
</style>

当手机屏幕小于760的时候就采用该样式

==F12慢慢调节吧

[successbox title=”视频下载”]

晚上更新

[/successbox]

PC端网站转移动端（自适应）布局不同屏幕展示不同CSS