页面布局自适应之@media screen

最新推荐文章于 2025-06-23 15:29:20 发布

自由的刺猬

最新推荐文章于 2025-06-23 15:29:20 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5/css3学习

本文链接：https://blog.youkuaiyun.com/who_is_xiaoming/article/details/51544199

html5/css3学习专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在项目中利用@media screen进行页面布局的自适应调整，以适应手机、iPad和电脑等不同设备。通过@media screen的用法，避免了为不同设备创建独立页面的冗余，实现了更简洁的解决方案。文章分享了作者的部分核心代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在原有的项目基础上调整页面，要求：适配手机，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可以让它引用一个样式，不同的情况下给予不同的样式即可。话说，这几天遇到好几个问题都多亏了同事的提点，我的同事都是些可爱的小伙伴，谢谢你们~~~