响应式布局（viewport、百分比布局、媒体查询、em/rem、vw/vh）

最新推荐文章于 2024-06-10 21:57:03 发布
最新推荐文章于 2024-06-10 21:57:03 发布
阅读量332 收藏 2
点赞数 2
文章标签： 前端 html 媒体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43765641/article/details/127154694
版权

目录

一、viewport

1、设置宽度为屏幕宽度

2、最大缩放比例为1.0

3、最小缩放比例为1.0

4、禁止用户捏合操作

5、初始化的缩放比例

二、百分比布局

三、媒体查询

1、大于某个值时的样式

2、小于某个值时的样式

3、在最大值和最小值内的样式

4、除某个范围内的样式

四、em和rem

五、vw和vh

一、viewport

作用：初始化页面元素，防止页面被缩放，规范用户操作

1、设置宽度为屏幕宽度

width=device-width

2、最大缩放比例为1.0

maximum-scale=1.0

3、最小缩放比例为1.0

minimum-scale=1.0

最低0.47元/天 解锁文章
辰辰辰辰宸
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
虚幻引擎（UE4）中Viewport的解析
山中传奇工作室
06-11 4648
在调试UE4代码时往往看到SViewport、FViewport、FViewportClient、FSceneViewport这一大堆viewport相关的类会感到tou'yun'nao
响应式布局中的方案之百分比布局
weixin_34249367的博客
06-08 2413
1、百分比（流式）布局定义：当浏览器的宽高发生改变时，通过百分比单位，可以使用浏览器中的组件的宽高随着浏览器的变化而变化，从而实现响应式布局。注意点：使用百分比就要注意这个百分比是谁的百分比：子元素的宽高百分比是直接父元素的宽高定位中的top、bottom、left、right等都是相对于直接非静态定位的父元素的宽高padding如果设置百分比，无论是垂直方向还是水平方向，都是相对于直接父级元素的...
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
01-18
媒体设备类型使用详解： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no> <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0
【UE·总结篇】我的UE4游戏开发笔记和Bug集锦①
水鸡的游戏开发学习笔记
08-03 2136
这系列文章记录了我平常实战中对于**UE4引擎、开发工具、代码中遇到的问题的解决方法、遇到的坑和使用上的一些技巧**，类似于学生时代的笔记本和错题集。每条单独拿出来都不足以支撑一篇博客的量，所以把这些零碎的经验汇总成一篇篇文章。计划出成一个系列，这一篇总结了今年上半年来的工作经验。
响应式布局之viewport-超级简单
故里2130
02-13 1441
多的就不说了，但是要补充一点，最重要的是： 使用vite创建和官网不一样，不需要创建postcss.config.js，直接在vite.config.js中创建就行了，或者创建postcss.config.js后，必须在vite.config.js中引用。上面的文章可以实现响应式布局，根据浏览器的大小变化而变化，但是相对于viewport来说，之前的还是有点复杂，而使用viewport更加的简单。那么代码的大小，就是实际的大小，必须是这里的400px，600px。1600px的电脑效果，宽度响应式变小了。
响应式布局的实现方式（5种）
热门推荐
m0_66051368的博客
04-12 3万+
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。 1、百分比布局 百分比是相对于 包含块 的计量单位，通过对属性设置百分比来适应不同的屏幕 包含块： 1. 有父元素相对于父元素 2. 无父元素相对于视口 3. 或者继承于父元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta...
ue4 蓝图设置屏幕百分比_【UE4教程】虚幻4引擎动画在线自学
weixin_39667080的博客
11-21 973
一、角色动画工具使用虚幻引擎的网格体和动画编辑工具全面定制角色并打造令人信服的动作，这些工具包含强大的功能，例如状态机、混合空间、正向和逆向运动学、物理驱动的布娃娃效果动画，以及同步预览动画的功能。可编制脚本的骨架绑定系统提供实现程序性骨架绑定、引擎内动画或者设置自定义再定位或全身IK解决方案的方法。第五课 3D Max场景导出免费视频教程-羽兔网​www.yutu.cn二、动画蓝图使用动画蓝图创...
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
m0_52900946的博客
04-21 2737
    在前端开发过程中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem、和vw /vh,本文主要分析px在移动端布局中的不足，以及几种不同的自适应解决方案 一、px和视口     一般情况下，我们写网页时最常用来描述长宽的单位是像素（px）,在pc端，通常认为css中，1px表示的真实长度是固定的     其实并不是这样，px是与设备有关的，例如font-size为16px的时候，在pc端和移动端的大小是不一样的    所以，css中1px的真实长度是由什么决定的呢
自适应屏幕的CSS响应式布局设计技巧总结
12-13
响应式设计目前非常流行自适应设计与响应式设计，而且经常让人混淆，自适应设计不应与自适应布局混为一谈，它们是完全不一样的概念。在这先说明下这两者的异同：自从移动终端飞速发展以来，各种各样的机型突飞猛进，...
布局常用解决方案对比(媒体查询、百分比、rem和vw-vh）.docx
10-26
布局常用解决方案对比（媒体查询、百分比、rem 和 vw-vh） 在前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem 和 vw/vh 等。在这篇文章中，我们从 px 单位出发...
vue 实现 rem 布局或vw 布局的方法
12-13
一、实现 rem 布局 移动端 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 方法一、在 index.html 或者 main.js 中添加以下代码： const setHtmlFontSize = ...
浅谈html5 响应式布局
01-21
一、什么是响应式布局?  响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。  这个概念是为解决移动互联网浏览而诞生的。...
响应式 Web 设计 - Viewport
rolanannn的博客
04-11 656
帮助大家快速了解前段响应式基础操作
响应式布局——视口viewport和常用单位
weixin_51081257的博客
11-25 2455
了解一下响应式布局视口和视口常用单位
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
专研前端，探索后端
04-27 1009
移动端web现状： 移动端常见浏览器：UC浏览器，QQ浏览器，Opera浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器及杂牌浏览器。移动端常见的浏览器都是基于webkit内核开发的，国内机操作系统也是基于Android开发的，因此在移动开发中只兼容主流浏览器，即处理webkit内核浏览器即可。 手机屏幕现状：移动设备的屏幕尺寸繁多，常见Android设备分辨率有：480x800、 480x854、 540x960、720x1280、1080x1920、2k、4k等；iPho
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
weixin_33968104的博客
06-20 1799
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像...
H5适配 之 viewport、rem
Yes_You_Can 的博客
10-14 421
H5窗口适配的viewport讲解
响应式布局方法总结
weixin_45189747的博客
11-10 1844
定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到...
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 574
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
viewport响应式布局具体怎么实现
06-08
Viewport 是指浏览器窗口中用于显示网页的区域，而 viewport 响应式布局则是指根据不同的设备屏幕大小，动态改变 viewport 的大小以适应不同的屏幕大小，从而实现响应式布局。具体实现如下： 1. 设置 viewport 的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值