专栏首页十月梦想移动端适配之百分比适配

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

今天介绍的是百分比适配,顾名思义,就是宽度使用百分比进行替代传统的具体像素适配!

接下来看一下百分比适配的问题

优缺点:

1.百分比不好计算

2.需要确定父级的宽度,百分比依照父级计算

3.宽度可以很好适配,高度无法确定,

4.可能会使形状严重改变!

(IP6下可能是正方形,6p,其他设备可能就是变形,影响用户体验)

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百分比移动端适配</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<style>
			html,body{
				overflow-x: hidden;
			}
			*{
				padding:0;
				margin: 0;
			}
			.div{
				float: left;
				width:calc(100%/6);
				height:100px;
			}
			.div:nth-child(1){
				background-color: #ff0036;
			}
			.div:nth-child(2){
				background-color: paleturquoise;
			}
			.div:nth-child(3){
				background-color: greenyellow;
			}
			.div:nth-child(4){
				background-color: deepskyblue;
			}
			.div:nth-child(5){
				background-color: darkorange;
			}
			.div:nth-child(6){
				background-color: fuchsia;
			}
		</style>
	</head>
	<body>
		<div class="div">1</div>
		<div class="div">2</div>
		<div class="div">3</div>
		<div class="div">4</div>
		<div class="div">5</div>
		<div class="div">6</div>
	</body>
</html>

简单来说,宽度很容易进行实现,但是高度的适配严重无法匹配!比如在5%的宽度在不同设备指定的不同的宽度,相对于高度不易控制!那么这个百分比适配存在什么必要,通常百分比适配结合其他的适配方案(例如viewport适配以及移动适配方案终极方式rem适配,稍后文章会详细介绍)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想
  • box-sizing

            在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

    十月梦想
  • bootstrap栅格换行时产生空白解决

    最近使用bootstrap开发项目,但是用到全局css样式中栅格时候出现问题,就是当前窗口的首行正常显示,到了第二行开始则开始不能正常排布!

    十月梦想
  • web完全响应式布局 原

    在页面布局中响应式布局优势很明显,能适应不同的屏幕,现在很多的网站系统也都是响应式布局

    tianyawhl
  • 如何编写轻量级 CSS 框架

    Github: https://github.com/nzbin/snack Docs:  https://nzbin.github.io/snack 前言...

    叙帝利
  • css实现左右两个div等高

    现在有两个div,但是两个div里面内容多少不确定,可能左边多,可能右边多,css要如何设置可以保证左右两边的div等高呢?

    Daotin
  • jQuery

    jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Docum...

    新人小试
  • jquery

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代...

    suwanbin
  • Web前端学习笔记之jQuery基础

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代...

    Jetpropelledsnake21
  • 事件修饰符

    章鱼喵

扫码关注云+社区

领取腾讯云代金券