用CSS3怎么实现移动端响应式布局,要点有哪些
Admin 2022-07-04 群英技术资�
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,移动要兼容,而且要求很高那么媒体查询还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
HTML中跨列属性COLSPAN用法是什么,如果你正在学习HTML,不妨都看看小编所整理的资料,希望能在工作中帮助到你�
在开发过程中,很多需求需要我们居中一个div,而CSS实现div居中的方法有很多,那么div不设高度能完全居中吗?答案是可以的,这篇文章主要就给大家介绍div不设置高度如何实现完全居中效果,以下是实现要求:
这篇文章主要介绍了纯css实现乌云密布的天气图标效�,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
css怎样在div边框上设置文字可以使用position属性将div中边框的文字设置为绝对定位样式,然后将其定位在边框上即可。示例如下:<!DOCTYPE html><html lang="en"><head> <met
这篇文章主要介绍了css3实现的加载动画效果,帮助大家更好的利用css3制作网页,感兴趣的朋友可以了解下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078