关闭

页面布局自适应之@media screen

369人阅读 评论(0) 收藏 举报
分类:

       在原有的项目基础上调整页面,要求:适配手机,ipad和电脑。本来打算用最笨的方法各给他们安排一个页面,但这样感觉有些冗余,向同事们请教,有为同事说可以通过request请求来判断设备,还有位说可以用@media screen来进行调整,不用通过action。于是果断搜索@media screen的用法,把另一种方式放在了一边,效果还可以,把我的部分主要代码分享下:    

/**屏幕宽度小于479px,适配手机*/
@media only screen and (max-width: 479px){
   .list-item {
      border-bottom: 1px solid #EFEFEF;
	  width: 100%;
	  height: auto;
	  line-height: auto;
	  padding: 9px;
	  background-color: #FFFFFF;
   }
}

/**屏幕宽度大于480px 适配pad*/
@media only screen and (min-width: 480px) and (max-width: 900px){
   .list-item {
      border-bottom: 1px solid #EFEFEF;
      padding: 1%; 
      cursor: pointer;
      width: 99%;
      height: auto;
      line-height: auto;
      padding: 9px;
      background-color: #FFFFFF;	
   }
}

/**屏幕宽度大于900x 适配电脑*/
@media only screen and (min-width: 901px){
   .list-item {
      border-bottom: 1px solid #EFEFEF;
      padding: 1%; 
      cursor: pointer;
      width: 99%;
      height: auto;
      line-height: auto;
      padding: 9px;
      background-color: #FFFFFF;	
   }
}
       如代码所示,边界值是可以自己限定的,然后页面中的div可以让它引用一个样式,不同的情况下给予不同的样式即可。话说,这几天遇到好几个问题都多亏了同事的提点,我的同事都是些可爱的小伙伴,谢谢你们~~~

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:67845次
    • 积分:1187
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:11篇
    • 译文:0篇
    • 评论:34条
    最新评论