如何实现响应式布局

最新推荐文章于 2024-09-30 15:42:36 发布

xuxb000

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量906

点赞数 21

分类专栏： css 文章标签：前端

本文链接：https://blog.csdn.net/xiubinxu/article/details/135506083

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了响应式布局在网页设计中的重要性，详细讲解了媒体查询、flex弹性布局以及rem技术如何使网页自适应不同设备。通过实例演示了如何利用这些方法创建适应性强的网站设计。

摘要由CSDN通过智能技术生成

在网页设计中，响应式布局是一种能够使网页在不同设备上呈现出最佳效果的设计方法。无论是在台式电脑、平板还是手机等设备上，网页都能够自动调整布局和大小，以适应不同的屏幕尺寸和分辨率。

响应式布局的重要性

随着移动设备的普及，用户使用各种不同尺寸的设备访问网页。因此，实现响应式布局对于提供良好的用户体验至关重要。下面我们将详细介绍一些常见的响应式布局方法。

响应式布局方法

1. 使用媒体查询（Media Queries）

媒体查询是CSS3的一项重要特性，它允许根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式。通过媒体查询，可以针对不同的设备尺寸定义不同的样式。以下是一个简单的媒体查询示例：

@media screen and (max-width: 1200px){
 body{
  background-color:#6633FF;
 }
}
@media screen and (max-width: 960px){
 body{
  background-color:#FF6699
 }
}
@media screen and (max-width: 768px){
 body{
  background-color:#00FF66;
 }
}

在使用min-width时，小的在前面，大的在后面；同理，如果使用max-width时，就是大的在前面，小的在后面。

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

@media screen and (min-width:960px) and (max-width:1200px){//1200>=设备>=992}

横屏与竖屏

/* 竖屏 */  
@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }  
  
/* 横屏 */  
@media screen and (orientation: landscape) { 对应样式 }

想看更多关于媒体查询的，请点击跳转

2. flex弹性布局

弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。

在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

.container {
  display: flex;
  justify-content: space-between;
}

想看更多关于flex弹性布局的，请点击跳转

3. 百分比%

不推荐，难度略大

4. rem

实现原理：

动态改变 html的font-size值的大小，来完成rem实现响应式布局

rem实现响应式原理：

rem 的值都是根据html的fontsize进行计算的

统一缩放元素大小，只要修改html的fontsize

html  {   font-size: 100px;
		/* 将图片的大小变成 75*75 */
		/* font-size: 50px; */
}
main {
	width: 1.5rem; 
	height: 1.5rem;
	background-color: #f38888;
}
/*省略其他的CSS样式*/

使用rem开发响应式布局步骤1:

从Ui设计师拿到设计稿，一般尺寸都是以iphone 6的尺寸为准 750*1334（6381136）

在样式中给html设定一个fontsize的值，我们一般设置一个方便后续计算的值，例如10px、100px等，我们使用100px

写样式

完全按照设计稿的尺寸来写样式，设计稿上的长度、height、margin、padding、字体的值是多少，我们就写多少，这样可以100%还原设计稿

注意：需要把得到的像素值/100px,转换为rem单位

使用rem开发响应式布局步骤2:

根据当前屏幕的宽度和设计稿的宽度来重新计算html的FontSize的大小
根据当前屏幕宽度和设计稿的宽度的比例，动态计算当前宽度下的fontsize值大小，如果fontsize值改变了，之前设定的所有的rem单位的值自动会跟着改变

<script>
    function setRem() {
        var ui_w = 375;
        // 获取屏幕的宽度
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
       
 
        // 通过js动态改变html根节点字体大小
        var html_ = document.getElementsByTagName('html')[0];
        html_.style.fontSize = (clientWidth/ui_w)*100 +'px';
    }
    // window.onresize 浏览器被重置大小执行事件
    window.onresize = setRem;
</script>