这篇文章给大家介绍如何在pc和移动端中实现响应式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强> 1。响应式跟自适应有什么区别?
有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的。
自适应是最早出现的，后面才有了响应式。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。
如下图所示，对于同一个页面（图中的Html），如果用响应式布局来处理的话，用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容有很大不同。
而如果用自适应布局去处理的话，那不管访问设备如何的不同（下图是三台尺寸不一样的手机），最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。
响应式网站：https://www.microsoft.com/zh-cn/
自适应网站：http://m.ctrip.com/html5/
2.实现响应式有哪几种方式?
1.使用媒体查询(Media Query) 结合 rem字体
记住,先在 标签里加入这个meta标签(设置设备按照一比一的尺寸进行显示，并且禁止用户缩放页面):
其次是媒体查询，这个大家应该都知道，这个是响应式最重要的部分。
如果大于1000px，就用：
@media screen and (min-width:1000px){...} 对应PC端页面如果在小于1000px和大于768px之间：
@media screen and (max-width:1000px) and (min-width:768px) {...} 对应平板端页面如果小于768px：
@media screen and (max-width:768px){...} 对应手机端页面然后是rem字体，rem是css3新出的单位，是指相对于根元素的字体大小的单位。一般设置在html,body，结合媒体查询我们可以这样写：
@media screen and (min-width:1000px){
html,身体{
字体大小:14 px;
}
},,
,,,,
@media screen 以及(max-width: 1000像素),以及(min-width: 768 px) {
html,身体{
字体大小:13 px;
}
},,
@media screen 以及(max-width: 768 px) {
html,身体{
字体大小:12 px;
}
} 然后在样式表里面,把px单位都转换为快速眼动,这样快速眼动就会根据我们在html,身体设置的字体单位进行自动缩放的过程。
至于1 px等于多少雷呢,我习惯是100 px等于1快速眼动,这样做的好处有两点:
第一,谷歌浏览器的默认字体是12 px,小于就失效,如果1快速眼动等于10 px的话是没有任何效果的第。二,容易换算,例如我们15 px的话,就写0.15快速眼动。
当然还有几种比较方便的,如果你有使用webpack的话,可以使用<代码> postcss-pxtorem> px2rem-loader>
转换前:
转换后:
还有一种就是使用崇高的文本的插件,cssrem神器!在你输入的时候就自动转换了。
这里介绍一种用js自动计算rem的方法,可以不用到媒体查询:
