做前端的经验博

最新推荐文章于 2022-03-29 11:32:29 发布

原创最新推荐文章于 2022-03-29 11:32:29 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了网页设计中常见的适配方法，包括使用媒体查询隐藏特定屏幕尺寸下的元素及通过百分比布局保持内容的响应式调整。此外还分享了利用CSS属性确保内容随窗口大小变化而自适应的实践。

页面需要考虑对于不同屏幕的适配问题，使用百分比布局和媒体查询是解决方法：

媒体查询格式示例如下：

@media all and (max-width:768px){
	#page2Image{
		display: none;
	}
	#grapeImg1{
		display: none;
	}
	#grapeImg2{
		display: none;
	}
	#grapeImg3{
		display: none;
	}
	#grapeImg4{
		display: none;
	}
}

代码的意思是，当屏幕宽度在768px之下时，拥有这些id的标签都不显示。

使用百分比布局时，利用

position:absolute;
position:relative;
left:50%;
top:10%;
width:30%;

这几个css属性，可以使得当界面变化时，内容的位置和大小也随之变化

可以使用一个div包裹页面主要内容，并为这个div设置一个max-width,这样就算在屏幕宽度很大的设备上看界面，内容也都在这个宽度有限的div中，不会被拉的很长。

另外，可以给标签使用data-index属性，（index可以替换成任意名字）。

<li><a href="#" class="classifyLi" data-index="3">开飞机的兔子</a></li>

在js文件中可以采用如下方式获得该值：

$(".classifyLi").bind("click",function(){
    var newIndex=$(this).attr("data-index");
    // 新的页面
    switch (newIndex){
      case "3":
        // 调用某函数
        page1Disappear();
        break;
      default:
        break;
    }
});

下面是监听网页大小变化和获得页面宽度的方法：

$(window).resize(function(){//code
} );
var width = $(document.body).width();

另外，还有一些情况下，采用float语句之后，就会发现子元素无法撑起父元素的大小了，怎么吧～

给父元素使用语句：overflow:hidden就可以解决问题啦～

还有，感悟最深的是，好的css语句不如写一个好的标签结构～～～～～所以开始制作页面以前应该好好想一下html文件怎么写合理喔～～～～～～

作为一只兔子要去蹦跶一会儿了～