CSS3移动端vw+rem不依赖JS实现响应式布局的方法


Posted in HTML / CSS onJanuary 23, 2019

1、前言

(1)vw/vh介绍

在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%,一般我们常用的vw单位来完成响应式开发

(2)rem介绍

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数,比如你html设置的字体为20px,那么页面中的1rem就相当于20px,举个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,h1 {
    font-size: 12px;
}
p {
    font-size: 2rem;
}
</style>
</head>
<body>
<h1>我是h1中的文字</h1>
<p>我是p标签中的文字,是h1文字的两倍</p>
</body>
</html>

2、正文

(1)有了上面对这两个单位的了解,我们就可以通过换算来完成移动端的响应式布局处理,这里我们用iPhone6/7/8的手机为例,屏幕宽度为375px。

1vw = 3.75px

(2)好,现在我们想象下100px等于多少vw呢?这里需要计算一下。

100px = 26.6666666vw     //因为是无限循环,这里取7位小数

(3)那么怎么把rem和vw联系起来呢?这里我们来写一个小案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
        html{
            font-size: 26.6666666vw  
        }
        p{
            font-size: 0.2rem;
            width: 2rem;
            height: 1rem;
            background: pink;
            margin: 0 auto;
            line-height: 1rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <P>我是P标签中的文字</P>
</body>
</html>

上面的案例我们把html中的font-size设置为26.6666666vw,这代表着font-size=100px,然后结合rem的特性就实现了前端css响应式布局

总结:前端响应式布局有很多种,pc端的响应式框架也有很多,移动端的很多框架也自带响应式,这种方法我觉得也是比较好用的方法,html中的font-size大家可以随意设置,只是换算过来很麻烦,于是很多方法也就产生了,很多编辑器有自动换算的功能,比如我用的sublime编辑器,网上也有很多在线的网页在线转化,好了,以上就是我的使用心得,如有错误之处,请大家多多指正!

3、其他响应式布局介绍

(1)流式布局

流式布局即百分比布局,例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。

(2)媒体查询

媒体查询是监听当前屏幕的宽度来响应你对应的设置,比如375px的屏幕字体为12px,960的屏幕字体为18px,对于简单的页面来说写起来很庞大,但是对于大型项目来说还是很方便的,媒体查询有个特点就是比如你从375px屏幕缩放到960px屏的时候字体或者图片会突然放大,也算是一种不好的体验吧,但是实际运用中并没有什么关系。
布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。

设计方法:媒体查询+流式布局。

总结:

1.如果只做pc端,那么流式布局(定宽度)是最好的选择;

2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(vw)是最好的选择,一份css调节font-size搞定;

3.如果pc,移动要兼容,而且要求很高那么媒体查询还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 #HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 #HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 #HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 #HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 #HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 #HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 #HTML / CSS
You might like
PHP定时更新程序设计思路分享
2014/06/10 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Vue中props的使用详解
2018/06/15 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python读取properties配置文件操作示例
2018/03/29 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
国际贸易专业自荐信
2014/06/10 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
创业计划书之家教中心
2019/09/25 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
德生2P3收音机开箱评测
2022/04/30 无线电
css样式important规则的正确使用方式
2022/06/10 HTML / CSS