html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！

一、前言

根据前面写的你不知道的css单位，进行了一种响应式布局的思考。

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

单位可参考：你不知道的css单位

该布局兼容性如下：

firefox

chrome

safari

opera

ios safari

android browser

android chrome

9.0+

2.0+

4.0+

3.1+

3.5+

3.2+

2.1+

18.0

二、正文

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

2、rem布局-解决字体适配(此布局在weex中无法识别)

rem布局原理：根据css的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。

@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;

}

3、vw、vh、rem的使用

.box{

width:50vw;

height: 20vh;

line-height: 20vh;

font-size: 1.5rem;

margin:0 auto;

font-weight: bold;

background-color: rgba(255,255,255,0.8);

}

上面代码中的50vw代表了此p占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应;

字体则是1.5倍的html根字体大小。并且根据媒体查询进行字号变化。

三、感受

使用vw+vh+rem的布局之外，可以再加上elementui的栅格布局，可以轻松、快速的搭配出真正的响应式布局，但要注意的兼容性问题！

html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！相关推荐

【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍布局:layout 对事物的全面规划和安排页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
html页面的响应式布局,HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
html5响应式布局实例,CSS3响应式布局案例
布局结果图: 电脑全屏: 手机浏览: 竖屏: 横屏: 代码: 响应式布局 * { margin: 0; padding: 0; } html, body { height: 100%; font: 2 ...
html 响应式布局注意问题,响应式布局总结(推荐)
响应式布局的开发基础知识本章主要分为以下几个部分 •正确理解响应式设计 •响应式设计的步骤 •响应式设计需要注意的问题 •响应式网页布局实现原理第一:正确理解响应式布局响应式网页设计就是一个网站 ...
响应式布局 android,Android响应式布局
本文由伯乐在线 - chris 翻译.未经许可,禁止转载! 英文出处: mdswanson.欢迎加入翻译组. 由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布 ...
ul 响应式布局_HTML5中响应式布局怎么弄？？
繁华如梦倾城殇 HTML 5中新增加了不少标签,如: article, aside, details, figcaption, figure, footer, header, hgroup, men ...
前端开发响应式布局和移动端布局有哪些特点和区别？
同学们在进行前端开发的时候经常会运用到响应式布局,在进行移动端页面开发的时候还会使用到移动端布局的知识,那么你知道他们都有哪些优缺点和相同之处吗?下面小千就来给大家列举一下. 响应式布局响应式布局是 ...
Vue2实现响应式布局方案
1.可以实现Vue移动端和PC端的响应式布局适配实现方法:通过 postcss-px-to-viewport 来自动将我们开发时的px单位计算转换为vw视口单位,完成响应式布局 . 安装插件 npm ...
CSS - 响应式布局（一）媒体查询
目录响应式布局引子理解响应式网页和响应式布局原理媒体查询什么是媒体查询? 什么是媒体类型? 什么是媒体特性? 媒体查询语法仿三星官网首页响应式布局引子通过前面两节的学习 CSS - ...

html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！

html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！相关推荐

最新文章

热门文章