首页 » web前端 » PC端网站转移动端(自适应)布局不同屏幕展示不同CSS

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

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

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

 

 

PC端网站转移动端(自适应)布局不同屏幕展示不同CSS简单的说:

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

普通的说:

响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。
响应式布局的一些技术点纪录:
(1)允许网页的宽度自动的调整
(2)尽量少使用绝对的宽度,多点百分比
(3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置
(4)流式布局,floatfloat的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向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》 发布于2018-07-03

赞(0) 生成海报

长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....