科普下:

平时很少用的css单位:

1.长度单位:

rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;

vw:相对于视口的宽度。视口被均分为100单位的vw;

vh:相对于视口的高度。视口被均分为100单位的vh;

vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;

vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

ch:数字0的宽度;

2.角度单位(transform用到的比较多)

deg:度(Degress)。一个圆共360度;

grad:梯度(Gradians)。一个圆共400梯度;

rad:弧度(Radians)。一个圆共2π弧度;

turn:90deg = 100grad = 0.25turn ≈ 1.570796326794897rad,即1turn=1圈=360deg=400grad=2π;

视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以解决各种屏幕适配问题!

vw、vh是基于视口的布局方案,故这个meta元素的视口必须声明。(解决宽高自动适配)

vw + vh + rem布局首先还是

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

其次:直接上代码

<template>
<div class="mobile_box">
<h1>移动端测试布局使用vw+vh+rem</h1>
<div class="test_port">
<p>测试视口</p>
</div>
</div>
</template>
<script>
export default {
data() {
return { }
},
methods: { }
} </script>
<style scoped>
.test_port {
width: 30vw;
height: 50vh;
line-height: 50vh;/*讲白了就是可视窗口宽高单位 + 字体用rem等比缩放*/
font-size: 1rem;
text-align: center;
font-weight: bold;
border:1px dashed #ccc;
background-color: rgba(255, 255, 255, 0.8);
} h1 {
text-align: center;
} </style>

总结:代码这样的东西没必要完全按照别人的来,怎么合适怎么方便怎么效率好怎么来咯。

另外附上媒体查询@media

@media only screen and (max-width: 1600px) and (min-width: 1280px){
html{
font-size: 14px;
}
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
html{
font-size: 12px;
}
}
@media only screen and (max-width: 960px){
html{
font-size: 10px;
}

转自:https://www.cnblogs.com/lhl66/p/9475531.html

vw+vh+rem响应式布局的更多相关文章

  1. css新单位vw,vh在响应式设计中的应用

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

  2. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  3. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  4. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  5. 自适应布局,响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  6. rem字体响应式布局

    引用js,自动算字体大小,响应式布局 <script> var iScale = 1; iScale = iScale / window.devicePixelRatio; documen ...

  7. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

  8. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  9. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

随机推荐

  1. JQuery常用和很有用处的方法

    1.grep()方法: 用于数组元素过滤筛选 grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数 ...

  2. java实现赋值excel模板,并在新文件中写入数据,并且下载

    /** * 生成excel并下载 */ public void exportExcel(){ File newFile = createNewFile(); //File newFile = new ...

  3. C# 过滤HTML,脚本,数据库关键字,特殊字符

    /// <summary> /// 过滤标记 /// </summary> /// <param name="NoHTML">包括HTML,脚本 ...

  4. 9.深入理解AbstractQueuedSynchronizer(AQS)

    1. AQS简介 在上一篇文章中我们对lock和AbstractQueuedSynchronizer(AQS)有了初步的认识.在同步组件的实现中,AQS是核心部分,同步组件的实现者通过使用AQS提供的 ...

  5. HDU5137-最短路-删点

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  6. DRUID连接池的使用

    DRUID介绍    DRUID是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控 DB池连接和SQL的执行情况,可 ...

  7. iptables详解(8):iptables扩展模块之state扩展

    当我们通过http的url访问某个网站的网页时,客户端向服务端的80端口发起请求,服务端再通过80端口响应我们的请求,于是,作为客户端,我们似乎应该理所应当的放行80端口,以便服务端回应我们的报文可以 ...

  8. datagrid与DropDownList关联使用

    最近做一个页面需要用到这个两个控件,之前虽然看过,但是没有动手实践过.突然要做这么一个页面,并用上,真的有点着急.于是乎,网上疯狂找datagrid与DropDownList 的例子,找了很多很多,看 ...

  9. 【2018 “百度之星”程序设计大赛 - 初赛(B)-1004】p1m2(迷之二分)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6383 题目就是让你求一个整数数组,在进行任意元素 + 1. - 2 操作后,请问在所有可能达到的稳定数 ...

  10. mysql主从复制跳过错误

    mysql主从复制,经常会遇到错误而导致slave端复制中断,这个时候一般就需要人工干预,跳过错误才能继续 跳过错误有两种方式: 1.跳过指定数量的事务: mysql>slave stop; m ...