响应式设计

最新推荐文章于 2024-06-16 11:10:10 发布
最新推荐文章于 2024-06-16 11:10:10 发布
阅读量318 收藏
点赞数
分类专栏： CSS 文章标签： 响应式

响应式设计

响应式是什么？

Responsive Web Design(RWD)，应用程序在不同设备或者不同尺寸大小的终端屏幕上做不同内容的展示；

自适应是什么？

Adaptive Web Design(AWD)，应用程序使用多个版本用户界面，针对不同设备，服务端返回不同版本用户界面；

响应式vs自适应

  1. 响应式是一套用户界面，后者是多套；
  2. 自适应需要服务端检测请求设备分辨率相关信息，返回对应版本渲染；

渐进增强

以移动设备优先，一些低版本或旧系统的设备并不支持js或css的新特性，通常实现一个基础版本，在大部分设备能满足基本功能后，兼容新特性新功能，拓展应用；

常用语响应式设计的UI单位：rem | %

rem是一个缩放单位，基于字体尺寸，基于文档根元素字体尺寸，如<html>font-size为12px，则1rem=12px; %是基于父元素的相关属性尺寸缩放，如父元素width:100px,font-size:14px；则width:10%就是10px,font-size:110%就是15.4px（取整）；例外：margin,padding属性的百分比是基于当前元素width值缩放；

视口viewport

  1. 视觉窗口：当前屏幕上页面的可见区域，可通过window.visualViewportAPI获取;
  2. 布局视口：可以理解为文档区域，可通过document.body.clientWidth 获取；
  3. 理想视口：设备的屏幕尺寸；

<mata name="viewport",width=device-width,initial-scale=1.0>

声明当前布局视口使用理想视口宽度，缩放比例为1，阻止设备自动调整页面大小；

实现

  1. 媒介查询 @media screen and (/尺寸/)
  2. 百分比布局实现弹性布局
  3. 相对单位使内容自适应
  4. 图片响应式：
  • 宽度百分比缩放
  • picture根据设备大小、设备分辨率、屏幕方向选择不同图片
<picture> <source media="(max-width: 599px)" srcset="profile-s.png"> <source media="(min-width: 600px)" srcset="profile-600w.png"> <img src="profile-600w.png" alt="Progile"></picture>

参考文章：https://juejin.im/post/5a5093bd6fb9a01c9b65c3c2#heading-37

AvaBlingBling
关注
专栏目录
移动端适配之viewport
luemeon的博客
04-19 682
此Hook利用了的resize事件，处理移动设备上因等导致视口变化API 提供了有关视觉视口（visual viewport）的信息，即用户实际看到的部分，这部分可能会因为UI元素（如地址栏和键盘）的显隐而改变。
CSS - 移动端布局（一）关键的前置知识
程序员阿甘的博客
08-17 1482
物理像素、物理分辨率、CSS像素、逻辑分辨率、设备像素比DPR、屏幕尺寸、像素密度PPI、DPI、视网膜显示屏、二倍图、三倍图、视口、布局视口、视觉视口、移动浏览器的布局视口、980、移动浏览器对PC网页的缩放、meta viewport、initial-scale、width、理想视口、device-width...........................
H5 手机键盘兼容
weixin_43294560的博客
09-09 4284
H5 手机键盘兼容。
Window and Viewport
疯狂的面包
08-29 969
1.在Windows程序设计时，面对屏幕的实际上存在3个坐标系，第一个是以整个屏幕建立坐标系，第二个是以窗口为坐标系，   第三个是以客户区为坐标系，这三个坐标系都是以像素为基本单位，（0，0）点都分别在各个对象的左上角，x轴递增方向   向右，y轴递增方向左。这是固定不变的，这些坐标统称为   设备坐标  。2.如果只有设备坐标的话，这将对画图有点不方便，比如，我想画一个2厘米为边长的正方形。这需要多少个像素才是2厘米呢？   这必然要经过取得设备的某些属性进行计算。为了解决以上问题出现了逻辑坐标。对于G
移动端适配viewport
sophia1010的专栏
02-03 2038
一、移动端适配基本概念 viewport 即视口 visual viewport 透过屏幕的可视区域 window.innerWidth layout viewport 渲染页面的虚拟窗口 document.documentElement.clientWidth document.documentElement.clientHeight 二、viewport适配
浅谈响应式设计
09-22
响应式设计是一种网页设计方法，其核心思想是创建一个能够适应不同屏幕尺寸和分辨率的网页布局，以提供统一的用户体验。响应式设计不仅考虑了不同尺寸的电脑显示屏，还包括了智能手机、平板电脑等各种移动设备。 ...
网页布局之响应式设计简明指南
09-25
响应式设计是网页布局的关键技术，它允许网页根据用户的设备类型、屏幕尺寸和方向自动调整布局，确保在任何设备上都能提供良好的用户体验。本指南旨在提供一个简明易懂的响应式设计概述。 首先，为什么需要响应式...
react中解决h5键盘弹起无法顶起屏幕问题
wjt_958958_的博客
12-09 487
【代码】react中解决h5键盘弹起无法顶起屏幕问题。
检测用户是否缩放了页面:pc端使用matchMedia检测devicePixelRatio变化；移动端使用visualViewport与手势缩放识别
Yami__yan的博客
06-02 752
检测用户是否缩放了页面:pc端使用matchMedia检测devicePixelRatio变化;移动端使用visualViewport与手势缩放识别
响应式设计——layout viewport、visual viewport以及相关属性
Doubleu_的博客
07-20 1210
在阅读这篇文章之前，你需要了解设备像素、逻辑像素（设备独立像素）和CSS像素的区别 layout viewport layout viewport是网页布局的区域，它是&lt;html&gt;元素的父容器。只要你不在css中修改&lt;html&gt;元素的宽度，&lt;html&gt;元素的宽度就会撑满layout viewport的宽度。 很多时候浏览器窗口没有办法显示出layout vi...
移动端flex垂直方向滚动条高度幽灵 视口详解 布局视口 视觉视口 理想视口
qq_44129572的博客
04-21 519
移动端布局视口宽度会被内容撑开，布局视口高度会跟着布局视口宽度变化。 移动端flex高度问题，高度幽灵，垂直方向滚动条 获取布局视口，获取视觉视口，理想视口
使用 JavaScript 操作 Visual Viewport 的方法
最新发布
lostdeer
06-16 719
Visual Viewport API 是一组接口，允许开发者获取视口的详细信息，并监听视口的变化。：视口的宽度。：视口的高度。：当前的缩放比例。：视口左上角相对于布局视口的左偏移量。：视口左上角相对于布局视口的上偏移量。
webview的输入及光标定位问题总结
Web_boom的博客
06-30 2259
本文将围绕以下问题进行展开：说明： 这里说的是没有任何用户行为前，有用户操作的自动聚焦无需处理，本身支持。首先，我们想到的是使用focus()来实现聚焦，然而，当在真机测试时却发现根本没效果解决方案ios手机ios系统默认不支持事件自动聚焦，所以这个需要客户端同学的支持，使webview允许事件自动聚焦。这样我们页面使用focus()会直接生效。Android手机安卓客户端的webview无法通过事件自动聚焦并拉起键盘，但是可以通过原生代码实现，添加原生方法：webview.requestFocus()然后
响应式布局
rongmingye
12-08 188
自适应布局 adaptive web design 自适应布局：一个应用程序使用多种版本用户界面，针对不同屏幕，服务器返回不同版本的用户界面，供用户访问。 响应式布局 response web design 响应式布局：一套应用程序用户界面能响应不同设备窗口或屏幕并且内容展示良好。 设计方法: 媒体查询 + 流式布局 优点：适应pc和移动端，如果足够耐心，效果完美 缺点：匹配足够多的屏幕，工作量大，代码不好维护 自适应和响应式的一些区别 自适应是多套用户界面，响应式是一套用户界面。 自适应需要
浏览器的layout viewpoint和visual viewpoint
山茶树和葡萄树
08-04 1117
本文原创，转载说明一下出处。 本文作者：山茶树和葡萄树 原贴地址：《浏览器的layout viewpoint和visual viewpoint》 本文链接：http://blog.csdn.net/xianghongai/article/details/76691347 浏览器视口（viewpoint）在PC端和移动端展现行为一致。 PC端，浏览器窗口大小是可以超过或小于设备屏幕分辨...
15个响应式设计前端框架
五天零一夜的寂寞
10-24 1444
收集了15个响应式前端框架，是为项目收集的素材和解决方案，如果您需要，可以挨个访问过去了解详情，也可以直接从Github获取。 Groundwork CSS 使用Sass创建的GroundCSS是一套全响应式框架，其中包含着具有高度的灵活性、可嵌套的液态网格系统，支持任意数量的列，能够帮你打造几乎任何类型的页面布局。 MUELLER Grid System
窗口window 和 视口 viewport 恐龙平铺 源代码
haimian520的专栏
10-24 738
相关代码 ： 窗口： glutInitWindowsSize(width, height);    glutInitWindowPosition(xPosition, yPosition);  它是你设定的大小 如 640*480；是一个逻辑的概念。（不变） 视口 ： glViewport(GLint x, GLint y, GLsizei width ,GLsizei height);
复杂产品响应式设计流程探索
"分享复杂产品的响应式设计流程" 响应式设计是现代网页设计的重要趋势，尤其是在2013年后，其重要性日益凸显。一淘设计团队通过在多个项目中的实践，尤其是“玩客”项目的全站响应式设计，积累了宝贵的经验。这种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值