写移动遇到的小问题以及心得

刚开始接触移并开始尝试写移动端应该都遇到过这样的情况,你以iPhone 6/7/8移动端为基础写的页面在切换到其他移动端的时候页面会由这个样子
在这里插入图片描述
变成这个样子
在这里插入图片描述
让你原本已经布好的排版变得不那么美观,甚至有点丑,这就牵扯到一个新的东西 响应式布局

那响应式布局到底是什么呢?它可以起到什么作用呢?

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计使用呢?
1:使用相对单位 % rem vh vw
2: 使用媒体查询,相当于在不同情况下令写了一套CSS样式
3: 借助UI 框架;因为UI是别人封装好的响应式。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值