学习笔记——响应式布局

你的名字 2022-11-22 12:52 172阅读 0赞

--------------------

> 为了让代码能够在不同的网页上显示，并且能够给用户很好的体验。一般要是用响应式布局的技术。它能根据设备大小自动调整内容。响应式布局包括以下内容：

### 1.媒体查询：  ###

> 通过媒体查询可以让不同CSS代码生效。

@media screen and (-webkit-min-device-pixel-ratio: 1) {} /*设备像素比*/

> 媒体查询可以根据设备像素比显示不同大小的图片。

### 2.宽高少用绝对长度单位： ###

> 在响应式布局中宽高尽量使用百分比或者相对长度单位。一般使用vw，vh
> 
> vw（viewport width）：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一。宽度/屏幕总宽度\*100vw
> 
> vh（viewport height）：基于视窗的高度计算，1vh 等于视窗高度的百分之一。
> 
> 微信小程序使用rpx。

$screenWidth: 375;
    @function px2vw($px) {
            @return $px / $screenWidth * 100vw;
    }

### 3.字体使用相对长度单位： ###

> 字体响应式布局使用相对长度单位：如rem
> 
> em：em相对于父元素的大小。如果父元素没有定义，会向上找到其祖先元素的字体大小。浏览器html的默认大小为16px
> 
> rem：相对于html中font-size的大小。浏览器html的默认大小为16px。
> 
> 微信小程序使用rpx。

html {
        font-size: 16px;
    }
    
    /* 设置span标签字体大小为24px */
    span { font-size: 1.5rem; }

###  4.弹性布局： ###

> 在页面布局方面，一般使用弹性布局。弹性布局天生响应式。display: flex;开启弹性布局。

###  5.float: ###

> float + div也可以实现一些响应式布局。

### 6.栅格系统：  ###

> Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

--------------------

> 响应式布局的好处是对于样式的控制可以十分精细，缺点是控制不同设备布局的样式是写在一起的，开发和修改不太方便。

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关响应式布局

一、响应式开发 1.1、概述就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2、响应式布局容器 1

落日映苍穹つ/ 2023年10月14日 11:07/ 0 赞/ 55 阅读

相关学习笔记——响应式布局

-------------------- > 为了让代码能够在不同的网页上显示，并且能够给用户很好的体验。一般要是用响应式布局的技术。它能根据设备大小自动调整内容。响应式布局

你的名字/ 2022年11月22日 12:52/ 0 赞/ 173 阅读

相关响应式布局

目录： 1. 响应式布局介绍 2. 响应式布局特点 3. 响应式布局的实现方式 4. 响应式布局媒体查询使用 5. 响应式布局示例 1. 示例1

快来打我*/ 2022年10月18日 01:38/ 0 赞/ 341 阅读

相关 CSS3学习笔记---响应式布局初略

响应式布局 1、媒体查询，根据不同的终端来调用对应的样式。其中Screen、All和Print为最常见的三种媒体类型。Handheld虽然是手持设备，但是iphone

深藏阁楼爱情的钟/ 2022年09月23日 11:59/ 0 赞/ 168 阅读

相关 CSS3学习笔记--media query 响应式布局

语法：@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 scre

àì夳堔傛蜴生んèń/ 2022年08月05日 05:16/ 0 赞/ 178 阅读

相关响应式布局

<table style="height:40px; border-color:a9a9a9; border-width:0px; background-color:a9a9a

àì夳堔傛蜴生んèń/ 2022年07月11日 08:14/ 0 赞/ 279 阅读

相关响应式布局

4.1 meta 标签最简单的处理方式是加上一个 meta 标签 <meta name="viewport" content="width=device-width,

左手的ㄟ右手/ 2022年03月09日 10:06/ 0 赞/ 342 阅读

相关响应式布局

响应式布局响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享

本是古典何须时尚/ 2022年01月29日 00:47/ 0 赞/ 354 阅读

相关响应式布局

简介什么是响应式布局? 同一个页面在不同屏幕尺寸下有不同的布局传统的开发方式是PC端开发一套,手机一套使用响应式布局只需要开发一套

以你之姓@/ 2022年01月20日 10:47/ 0 赞/ 397 阅读

相关响应式布局

一、什么是响应式布局？响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不

浅浅的花香味﹌/ 2021年12月22日 20:17/ 0 赞/ 382 阅读