浅谈响应式（pc端和移动端的）

最新推荐文章于 2024-07-27 10:45:43 发布
最新推荐文章于 2024-07-27 10:45:43 发布
阅读量3.4k 收藏 3
点赞数

文章来自：源码在线https://www.shengli.me/css/531.html

 

首先什么是自适应？它就是响应式吗？

 

先看下图吧

 

1.jpg

 

有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的.

 

自适应是最早出现的，后面才有了响应式。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

 

响应式——同一个页面用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容都有很大不同。

自适应——同一个页面用不同设备（电脑、平板、手机）去访问此页面，最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。

 

 

实现响应式步骤：

 

使用媒体查询(Media Query) 结合 rem字体

 

 

 

 

hugejihu9
关注
「UCD」浅谈UIUX设计与UE落地
AIGC大前端小王子
06-26 318
组件化设计是一种将界面分解为可复用组件的方法。这种方法类似于搭积木，每个组件既独立又统一，可以自由组合、替换或删除，以适应不同的设计需求。
移动端—响应式布局
weixin_46191548的博客
02-07 305
移动端开发的两种主流方案之一：响应式布局兼容 (1)内容没有受到(屏幕宽度)明显影响时，自适应宽高即可 (2)内容受到明显的影响时，改变布局，来保证内容的清晰 响应式布局：用于解决不同浏览器，不同分辨率及不同设备的不同显示效果 优点： 1)面对不同分辨率的设备灵活性很强 2)能够快捷的解决多设备显示适应的问题 缺点： 1)兼容各种设备工作量大，效率低，页面加载时间长 2)一定的程度上，会改变网站原...
移动端与响应式布局
403 Forbidden
08-29 356
切换设备 浏览器切换设备步骤： F12开启控制台，如图： viewport 视窗的设置 viewport只针对于移动端，PC端无效 content的配置： width=device-width：宽度等于设备宽度，浏览器宽度分辨率等于系统的分辨率 initial-scale=1：初始化比例是1 minimum-scale=1：最小的缩小比例是1 maximum-scale=1：最大的放大比例是1 user-scalable=no：用户不允许缩放 物理分辨率与逻辑分辨率 物理分辨率：即 标准分辨率，是指 显
Vue应用中适配多端（移动端、PC端）时，使用px和rem单位进行布局是一种常见的做法
最新发布
07-27 680
在Vue应用中适配多端（移动端、PC端）时，使用px和rem单位进行布局是一种常见的做法。px是像素单位，而rem是基于根元素（html）的字体大小的相对单位。以下是一些使用px和rem。
响应式布局Bootstrap--学习笔记
weixin_43482965的博客
03-05 764
一、响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ <1200px 宽屏设备（大桌面显示器） >= 1200p...
移动端，响应式布局
lin_fightin的博客
10-02 188
Bootstrap 响应式布局经常用到Bootstrap,首先去官网下载，接着要导入Bootstrap的css和js.然后选择你要的类型，复制其html，style,js代码。在自己修改即可。 栅格系统 首先有个容器 div ,类名为container 一行row 里面有12列 代码：col-lg-x 超大屏幕下分x份 col-md-x 大屏幕 col-sm-x 中屏幕 col-xs-s 小屏幕 hidden-lg超大屏幕下隐藏 -md大屏幕下隐藏 -sm中屏幕下隐藏 -xs小屏幕下隐藏 visible-m
移动端响应式布局
qq_41716608的博客
08-29 113
1.快捷键：meta:vp+tab键 代码：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 2.viewport视口 width=device - w...
浅谈pc和移动端的响应式的使用
12-14
首先，我们要明确响应式布局（Responsive Web Design）和自适应布局（Adaptive Web Design）的区别。自适应布局是早期解决多设备显示问题的方法，它基于固定的断点（breakpoints）来调整页面内容，使得页面在不同...
浅谈移动端适配大法
09-22
因为padding是以父元素的宽度为基准进行计算的，所以可以通过设置height为0，并通过padding-bottom来控制元素的显示高度，从而实现响应式的设计。 在移动端适配的另一种常用单位是rem。rem单位是相对于根元素的font...
响应式设计 Responsive web design
weixin_44739881的博客
05-18 491
响应式设计 Responsive web design 一 、 概念 Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. 响应式网页设计（RWD）是一种网页设计方法，可使网页在各种设备以及窗口或屏幕尺寸上都能很好地呈现。 响应式 VS 自适应 自适应设计（AWD） 一个
移动端响应式布局解决方案JavaScriptREM
08-10
移动端响应式布局解决方案、用 JavaScript 根据屏幕宽度计算 Root 字体大小弥补媒体查询断点断层过大问题，元素单位使用 REM 即可基于 Root 字体大小来改变自身大小。
移动端响应式框架
08-26
ipad 移动端 web app htm5 移动端 响应式框架
移动端之响应式布局
qq_45256777的博客
09-30 935
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 所以在页面布局较为简单，内容偏少时可以使用响应式布局，而不用为每一个终端做一个页
移动端 响应式布局
m0_46515475的博客
07-24 428
移动端响应式布局
pc端常用电脑屏幕及响应式
developestudent的博客
02-26 5767
屏幕宽度大小排序 分辨率 比例和设备尺寸 1024*500 （8.9寸） 1024*768 （比例4：3） （10.4寸、12.1寸、14.1寸、15寸; ） 1280*800 （16：10 ) (15.4寸） 1280*1024 (比例：5：4 ) ( 14.1寸、15.0寸) 1280*854 (比例：15：10 ) ( 15.2） 1366*768 ...
手机端响应式布局——flexible
iocncc的博客
06-29 437
//引入该flexible.min.js ! function(e, t) { function n() { var n = l.getBoundingClientRect().width; t = t || 540, n > t && (n = t); var i = 100 * n / e; r.innerHTML = “html{font-size:” + i + “px;}” } var i, d = document, o = window, l = d.documentEl
移动端WEB开发之响应式布局
weixin_50643611的博客
04-04 1576
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
使用HTML5和CSS3的响应式网页设计实战
响应式Web设计是一种现代网页开发技术，旨在创建能够根据用户设备的屏幕尺寸和方向自动调整布局、图片和功能的网站。这一技术的核心理念是“一次设计，处处适用”，确保无论用户是在桌面电脑、平板电脑还是智能手机...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值