CSS3——PC以及移动端页面适配方法(流体布局)
流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值。
但是流体布局中存在一个边框的问题,元素的边线无法计入百分比。
两种解决办法:
1)width:calc(20% - 4px)
2)width:20%; box-sizing:border-box
box-sizing这个属性能够改变盒子尺寸的计算方式,content-box是默认的盒子尺寸计算方式,而border-box改变默认计算方法,将边框也算在盒子尺寸中,所以这样设置后,width的20%也包括了边框的4px,就解决了这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--快捷键是meta:vp [tab],使视口适应移动端,没有缩放页面-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流体布局</title>
<style type="text/css">
body,ul{
margin:0;
padding:0;
} ul{
list-style: none;
} .menu{
height:50px;
} .menu li{
/*流体布局的width用百分比表示*/
width:calc(20% - 4px);
height:50px;
text-align: center;
float:left;
background-color: darkorange;
border:2px solid #fff;
} </style>
</head>
<body>
<ul class="menu">
<li><a href="">菜单文字</a></li>
<li><a href="">菜单文字</a></li>
<li><a href="">菜单文字</a></li>
<li><a href="">菜单文字</a></li>
<li><a href="">菜单文字</a></li>
</ul>
</body>
</html>
CSS3——PC以及移动端页面适配方法(流体布局)的更多相关文章
- CSS3——PC以及移动端页面适配方法(响应布局)
响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度. <!DOCTYPE html> <html lang="en" ...
- PC端、移动端页面适配方案
前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...
- 移动端H5适配方法(盒子+图片+文字)
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...
- 移动端 rem适配方法
rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
- pc和移动端页面字体设置
移动端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC” ...
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>我趣旅行网-美剧迷</ti ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- h5页面适配小结
大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...
- PC端页面适应不同的分辨率的方法 (转载)
原文地址:https://blog.csdn.net/fengzhen8023/article/details/81281117 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题 ...
随机推荐
- 阶段3 1.Mybatis_11.Mybatis的缓存_5 缓存的概念
2.Mybatis中的缓存 什么是缓存 存在于内存中的临时数据. 为什么使用缓存 减少和数据库的交互次数,提高执行效率. 什么样的数据能使用缓存 ...
- webService框架CXF的简单使用
最近本来已经将上一个项目交活,全身心投入了另外项目的前端的开发工作.可之前的项目经理通知我,之前的项目需要做一个webService的功能,于是稍微做了一下webService,可是忘了通知我现在的项 ...
- springmvc 获取request response
RequestContextHolder 获取request public HttpServletRequest getRequest() { return ((ServletRequestAttri ...
- Nginx/Nginx基础学习
Nginx与node.js 一.Nginx与Node.js Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡. ...
- js for 循环
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Java IO NIO详细讲解
1.IO Java IO概述 2.NIO Java NIO浅析
- CAS单点登录系统--进阶
2.CAS服务端数据源设置 2.1需求分析 我们现在让用户名密码从我们的优乐选的user表里做验证 2.2配置数据源 (1)修改cas服务端中web-inf下deployerConfigContext ...
- ARM编程模式和7钟工作模式
一. ARM的基本设定 1.1. ARM 采用的是32位架构 1.2. ARM约定: a. Byte : 8 bits b. Halfword :16 bits (2 byte) c. Word : ...
- Scrapy 教程(十)-管道与数据库
Scrapy 框架将爬取的数据通过管道进行处理,即 pipelines.py 文件. 管道处理流程 一.定义 item item 表示的是数据结构,定义了数据包括哪些字段 class TianqiIt ...
- 各种IE(IE6-IE10)兼容问题一行代码搞定
x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使 ...