最新消息:人非完美,知己不足才有前进的空间,一副无所不知的姿态,那才是井底之蛙之所为。

一行代码搞定自动智能识别手机和PC浏览器,实现自动转换相应的CS

    在做着博客的时候,我发现有时候在手机上浏览的时候,有些图片和框架已经固定了尺寸,不能智能的转换,所以我就想别人是怎么做到的。在以前也有想过,不过都是套用框架,已经被设定好了,不用自己去考虑,所以至今为知,不过现在必须要懂得时候了,所以,摸索了出来。

    其实非常的简单,就是CSS样式表的一行代码就可以搞定。

    代码如下:

@media screen and (max-width: 500px) { 
//这里填写CSS样式代码
}

    解释一下,max-width:500px  是可以修改的,你可以修改为任意的数值的px,

    在{}之中填写在设定当浏览器屏幕不大于500px时显示的样式。


举个栗子:

@media screen and (max-width: 500px) { 
.class {width:350px;height:120px; margin-top:50px;}
}

    这个是说,当浏览器屏幕尺寸不大于500px时,设定class组的元素的宽为350px;高为120px;和离顶部50px;



本文章已参与维权行动,如需转载请与我联系沟通!谢谢!

本文出自LY客栈-博客:一行代码搞定自动智能识别手机和PC浏览器,实现自动转换相应的CS,原文网址:http://blog.lykezhan.com/jishu/biji/2016/0822/124.html

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    最新评论