如何利用vw+rem进行移动端布局_CSS布局实例_CSS_网页制作

来源:脚本之家  责任编辑:小易  

PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。EM:EM就是根据基准来缩放字体的大小。EM实质是一个相对值,而非具体的数值。这种技术需要一个参考点,一般都是以的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。另外,em是相对于父元素的属性而计算的,如果想计算px和em之间的换算,这个网站不错,输入数据就可以px和em相互计算。狠击这里:px和em换算www.zgxue.com防采集请勿采集本网。

你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下vw吧,能让你的代码更纯粹

Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发

简单介绍下rem布局方案

width:100vw;height:50vw;background:#DDD;overflow-x:hidden;overflow-y:hidden;webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;} b { flex-shrink:0;width:98vw;height:48vw;

rem是css中的长度单位,1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时,你只需要改变根元素font-size值,所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码,根据屏幕宽度改变html的font-size值,就可以做到弹性布局。这种方法确实便捷,兼容性也很好,是目前非常主流的弹性布局方案。但这种方案有弊端(弊端之一:和根元素font-size值强耦合,系统字体放大或缩小时,会导致布局错乱;弊端之二:html文件头部需插入一段js代码 ),本文将介绍一种更优秀纯粹的方案。

因为代码没有考虑响应式和自适应布局 1、如果想让视图在放大或者缩小的时候还能正常的显示,建议考虑使用相对的单位如百分比、rem、vw之类的 2、另外建议使用响应式的布局如使用flex布局等方案

vw单位实现弹性布局

不行的,建议使用rem然后通过js改变html标签的font-size实现 例如rem设计稿像你一样用100,那就font-size:5rem;然后window添加事件监控设置window的最大宽度/100就是html标签的font大小 代码:

我们先来看看这vw vh单位 w3c的官方解释 vw:1% of viewport’s width vh:1% of viewport’s height

html5属于web编程,那样的话 还需要会 css和js(JavaScript) 这几个 都是搭建一个网页的基本, 另外还有php,asp.net,perl等等很多的语言也可以开发网页, (还有很多我也不知道,你以后可能会碰到更多

viewport即浏览器可视区域大小 我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight 在移动端我们一般都可以认为,100vw就是屏幕宽度。若使用vw布局,就不需要再像rem那样,在js中去动态设置根元素的font-size了,sass中只需要使用这个函数做转换即可

//以iphone7尺寸@2x 750像素宽的视觉稿为例@function vw($px) { @return ($px / 750) * 100vw;}//假设一个div元素在视觉稿中,宽度为120px,字体大小为12pxdiv { width: vw(120); font-size: vw(12);}

vw单位和百分比%单位对比

那么100vw和我们平时用的width:100%有什么区别呢?

1.百分比%是根据父元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受父元素宽高度影响。

2.100vw包括了页面滚动条宽度(页面滚动条属于viewport范围内,100vw当然包括了页面滚动条宽度)。但把body或者html设置为width:100%时,是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下,会比100%宽。 那么就会引发一个问题:pc端使用vw单位时,如果页面内容超出一屏长度,出现了纵向滚动条,同时有元素width:100vw, 则会导致出现条横向滚动条,因为元素(100vw + 滚动条宽度)超出了viewport宽度。(移动端滚动条不占位,所以不会有这个问题)不过pc端一般不需要弹性布局,还是尽量使用width:100%更保险。 根据CSS3规范,视口单位主要包括以下4个:

vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个

用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况)

例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。

兼容性

利用适口单位适配页面

对于移动端开发来说,最为重要的一点是如何适配页面,实现多终端的兼容,不同的适配方式各有千秋,也各有缺点。

就主流的响应式布局、弹性布局来说,通过Media Queries 实现的布局需要配置多个响应断点,而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率维持不表,而在响应断点切换的瞬间,布局带来断层式的切换变换,如同卡带的唱机般"咔咔咔"地一又一下。

而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小,使得CSS于JS耦合了在一起。

有没有办法能够解决这样的问题呢?

答案是肯定,通过利用适口单位实现适配的页面,是既能解决响应式断层问题,又能解决脚本依赖的问题的。

用法以iPhone6为基准(750)

第一步一般来说,我都会对移动端进行meta标签设置

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">

因为iPhone6以及大多数的dpr为2,为了第二步的方便进行换算

第二步设置body、html的font-size

html { font-size: 13.3333333333333vw // 100px}

13.3333333333333vw怎么来? 适口为100vw,以iPhone6 750px基准 适口/iPhone6 100vw / 750 = 0.133333333333333vw 如果我们以100px作为适口那么 100px / 750 = 0.133333333333333px 就是1px = 0.133333333333333vw 那么整个适口等于 0.133333333333333 * 10013.3333333333333vw = 100px 最终于得出 100px = 1rem

通过这样子换算我们利用vw把rem转换成了以100px为基准

那么在项目上就很好地可以进行使用了

div { // width: 100px; width: 1rem; } span { // height: 12px height: .12rem}

到此这篇关于如何利用vw+rem进行移动端布局的文章就介绍到这了,更多相关vw+rem移动端布局内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网! 

看你怎么写了,个人建议是不需要,方法有很多:js+rem,根据屏幕分辨率,决定根元素的font-size,全局用rem为单位,可以做到效果一样,展示发大缩小的;响应式布局,根绝分辨率的不一样写出不同样式vh vw布局方法很多,选出最适合自己 用的舒心就对了 我是用第一种 第二种偶尔 第三种也就看看没用过内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 浅析css中单位px、rem、em、vh、vw之间的区别
  • css 中px、em、rem、%、vw、vh单位之间的区别详解
  • css3移动端vw+rem不依赖js实现响应式布局的方法
  • css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
  • 浅析rem和em和px vh vw和% 移动端长度单位
  • 如何实现移动端的强制横屏
  • vw相比rem,在实际开发中究竟有多大区别
  • js或者css有什么办法强制设置ipad横屏显示
  • 我想用css的vw单位配合rem单位做字体的伸缩布局不知道可不可行?有前辈试过没?
  • 前端开发需要学什么啊?
  • javascript或H5在不使用JQ和CSS情况下实现划屏切换.
  • 网页li标签写的nav,但是缩小之后跑到下面去了,怎么解决?
  • CSS3中如何同时使用VW和VH作为单位?
  • 学习html5需要会java或者是其他的计算机语言吗?
  • 前端自适应页面到底该怎么做
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss布局实例vwrem移动端布局浅析css中单位px、rem、em、vh、vw之间的区别css 中px、em、rem、%、vw、vh单位之间的区别详解css3移动端vw+rem不依赖js实现响应式布局的方法css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况浅析rem和em和px vh vw和% 移动端长度单位css教程css3div+css教程web标准教程浏览器兼容教程css布局实例div+css通用样式布局实例代码如何布局登录页面bootstrap3.0教程之表单(form)使用详解css网页布局教程:绝对定位和相对定位创造100% 自适应css布局的行之有效的方法div模拟textarea文本域实现高度自适应效果代码两个div并排的实现代码bootstrap3.0教程之栅格系统原理(布局)css网页布局中文字排版的属性和用法css实现的漂亮的分页效果代码(橘黄色与蓝色)如何利用vw+rem进行移动端布局flex布局实现每行固定数量+自适应布局浅谈flex布局与缩放比例计算使用css实现三栏自适应布局(两边宽度固定,中间自适应flex布局做出自适应页面(语法和案例)详解flex布局中保持内容不超出容器的解决办法如何利用定位使元素居中(web端页面布局小技巧)css实现两栏布局,左边固定,右边自适应的4种方法css如何利用负margin技术实现平均布局css sticky footer经典布局的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved