浅谈pc和移动端的响应式
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的.
如下图所示,对于同一个页面(图中的Html),如果用响应式布局来处理的话,用不同设备(电脑、平板、手机)去访问此页面,最后看到的布局和内容有很大不同。 而如果用自适应布局去处理的话,那不管访问设备如何的不同(下图是三台尺寸不一样的手机),最后看到的页面内容和布局基本上还是一样的,就是尺寸略有不同。 响应式网站:https://www.microsoft.com/zh-cn/ 自适应网站:http://m.ctrip.com/html5/
标签里加入这个meta标签(设置设备按照一比一的尺寸进行显示,并且禁止用户缩放页面):
@media screen and (min-width:1000px){...} 对应PC端页面
@media screen and (max-width:1000px) and (min-width:768px) {...} 对应平板端页面
@media screen and (max-width:768px){...} 对应手机端页面
@media screen and (min--@media screen and (max-width:1000px) and (min-<span style="color: #000000">width:768px){
html,body{ font-<span style="color: #000000">size:13px; } } @media screen and (max-<span style="color: #000000">width:768px){ 然后在样式表里面,把px单位都转换为rem,这样rem就会根据我们在html,body设置的字体单位进行自动缩放的过程. 至于1px等于多少rem呢,我习惯是100px等于1rem,这样做的好处有两点: 第一,谷歌浏览器的默认字体是12px,小于就失效,如果1rem等于10px的话是没有任何效果的.第二,容易换算,例如我们15px的话,就写0.15rem. 当然还有几种比较方便的,如果你有使用webpack的话,可以使用或者,它们会把你写的样式打包的时候自动转换为rem,具体网上有教程. 转换前: 转换后: 还有一种就是使用sublime text的插件,神器!在你输入的时候就自动转换了. 这里介绍一种用js自动计算rem的方法,可以不用到媒体查询:
baseSize =
scale = document.documentElement.clientWidth / = Math.round((baseSize * Math.min(scale,
(Math.round((baseSize * Math.min(scale,))) <= =
document.documentElement.style.fontSize = autoWidth +
window.onresize =
这样只要把样式表的px单位都转换为rem即可.
根据上图可以看到,只要在class加上bootstrap独有的Class前缀,就可以使用bootstrap了,当然你得先引入bootstrap的插件.示例: 这段代码的意思是在小于768px的尺寸下,这个div是占用一半的位置的,而在>=768px且<992px直接,这个div只占三分之一的位置. 这样就可以根据不同的屏幕尺寸来达到响应式效果.
ps:如果大家想了解一些前端界的最新知识或者技术,公众号"前端快讯"每天会为你推送最新的知识点! 可以通过扫下面的二维码就可以了,谢谢关注^_^
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |