关于移动端布局和pc端写法
一：移动端准备工作
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
- <!-- 设置在苹果手机上以应用模式启动时，是否全屏 -->
<meta name='apple-touch-fullscreen' content='yes'>
<!-- ios 系统 作用未知 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- iso 系统 作用未知 -->
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<!-- iso 系统 作用未知 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 是否识别 手机号码、 电子邮件 地址 等-->
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<!-- 让360双核浏览器用webkit内核渲染页面 -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--微信缓存-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
- <![endif]-->
二：pc端准备工作
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!-- 让360双核浏览器用webkit内核渲染页面 -->
<meta name="renderer" content="webkit">
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
- <![endif]-->
三：base.css公共样式pc端
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0；border: 0;}
ol,li,ul,dl,dt,dd{list-style:none;}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}
img {vertical-align: middle;border: none;width: 100%;}
i {font: inherit;}
a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}
a:hover {text-decoration: underline; outline: none;}
select::-ms-expand { display: none; }
a:active,a:hover{outline:0}
.clearfix::before,
.clearfix::after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.fl{ float:left;}
.fr{float:right;}
input,select,option{vertical-align:middle;border-radius:0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}
input[type="text"],input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}
.overflow {overflow:hidden; }
四：base.css公共样式移动端
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0}
ol,li,ul,dl,dt,dd{list-style:none;}
.fl {float: left;}
.fr {float: right;}
table{border-collapse:collapse;border-spacing:0}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解决IOS默认滑动很卡的情况 */
-webkit-overflow-scrolling : touch;
}
/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
/* 取消链接高亮 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 图片自适应 */
img {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
-ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
}
em, i {
font-style: normal;
}
textarea {
resize:none; /*禁用了文本的拖拉，尤其在谷歌下*/
}
p {
word-wrap:break-word; /* 不够的单词自动换行 而不会被截掉 */
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
color: #fff;
font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
a:hover {
text-decoration: none; outline: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-family: 'Microsoft YaHei';
}
img {
border: none;
}
input{
font-family: 'Microsoft YaHei';
}
/*单行溢出*/
.one-txt-cut{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 2; */
-webkit-box-orient: vertical;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,a:active,a:visited,a:hover {
background: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.overflow {overflow:hidden; }
.w50{
width: 50%;
}
.w25{
width: 25%;
}
.w20{
width: 20%;
}
.w33{
width: 33.333333%;
}
五：移动端布局使用方法rem
第一种：js控制html字体大小， js代码放在head里面
html设置初始font-size：320px的字体大小
var html = document.getElementsByTagName('html')[0];if(html){var w = window.innerWidth;var fontSize = (w>640?640:w)/640 *30; 这里最少30，html.style.fontSize = fontSize + 'px';}window.onload = function(){window.onresize = function(){var w = window.innerWidth;console.log(w);var fontSize = (w>640?640:w)/640 * 30;这里最少30，html.style.fontSize = fontSize + 'px';}}第二种：js控制html字体大小常用 ，js代码放在head里面
html设置初始font-size：320px的字体大小
(function(doc, win) { var docEl = doc.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize'; var recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = (clientWidth>640?640:clientWidth)/ 320 *20 + 'px'; }; // 不同浏览器resize事件处理机制不同 // 使用定时器延迟处理resize回调函数以降低重复响应 var recalcTimer = null; var delaycalc = function() { win.clearTimeout(recalcTimer); recalcTimer = win.setTimeout(recalc, 100); }; // 移动端不需要考虑事件注册函数的兼容性 if (!doc.addEventListener) return; win.addEventListener(resizeEvt, delaycalc, false); // DOMContentLoaded事件只在DOM文档树加载完毕触发，此处不用延迟处理 doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); 第三种：用媒体查询控制html字体大小
一：字体大小为15px开始 常用
font-size: 15px
}
font-size: 4.7vw;
/* rem(root element)配合vw(viewport width) */
}
二：字体大小为13.65px 不常用
六：移动端布局用flex和自动缩放
新旧版本兼容：这里设置flex容器为.box，子元素为.item
1、Flex 布局
.box{display: -ms-flexbox; display: -webkit-flex; display: flex; display: -webkit-box; display: -moz-box;
}旧版：display：box
新版：display：flex
2、定义主轴的方向
水平方向：
.box{ -moz-flex-direction: row; -webkit-flex-direction: row;flex-direction: row;-webkit-box-direction: normal; -webkit-box-orient: horizontal;
}垂直方向：
.box{-moz-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;-webkit-box-direction: normal;-webkit-box-orient: vertical;
}旧版：box-direction: normal 水平方向 | reverse 垂直方向 | inherit ，跟子元素的方向一致; 定义子元素的显示方向。
box-orient: horizontal 水平排列| vertical 垂直排列| inline-axis 默认 | block-axis 快方式排列 | inherit继承父元素; 定义子元素是否应水平或垂直排列。
这两种要同时设置才能确定排列方式；
水平方向：box-direction: normal；box-orient: horizontal
垂直方向：box-direction: normal； box-orient:vertical
新版：flex-direction：row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
3、子元素主轴对齐方式
.box{-moz-justify-content: center;-webkit-justify-content: center;justify-content: center;-webkit-box-pack: center;
}旧版： box-pack: start | end | center | justify;
注意：兼容写法新版语法的space-around是不可用的
新版：justify-content：flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
4、子元素交叉轴对齐方式
.box{-moz-align-items: center;-webkit-align-items: center;align-items: center;-webkit-box-align: center;
}旧版： box-align: start | end | center | baseline | stretch;
新版：align-items：flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
5、子元素属性：子元素在水平或者垂直方向占几分
.item{-moz-flex: 1;-webkit-flex: 1;flex: 1;-webkit-box-flex: 1.0;
}旧版：box-flex：1.0浮点数字
新版：flex：1 数字
6、超出要不要换行 不兼容，就是兼容了也无效
要求换行
.box{flex-wrap:wrap;box-lines: multiple;
}旧版： box-lines: single默认不允许 | multiple 允许;
新版：flex-wrap: nowrap 不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
7.新版的其他语法
01、行内元素也可以定义flex语法：不常用
.box{display: -webkit-inline-flex;display: inline-flex;
}：02、父元素属性align-content属性 定义在多跟抽线的对齐方式，一般是换行以后的对齐方式，只有一条抽线改属性不生效，常用在换行以后有间距的问题：设置align-content：flex-start； 不常用
align-content：flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
03、子元素属性flex，是flex-grow, flex-shrink 和 flex-basis的简写，一般只定义子元素占多少份，常用
04、子元素属性flex-grow 定义子元素占一行的多少份，值为数字 不常用
05、子元素属性flex-basis属性 定义了在分配多余空间之前，项目占据的主轴空间 像素单位和百分比，默认auto
06、子元素属性flex-shrink属性 定义了子元素的缩小比例，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值无效
07、子元素属性order属性 定义子元素的排列方式，数值越小，越靠前排列，数字
08、子元素属性align-self属性 定义允许单个项目有与其他项目不一样的对齐方式，会覆盖algin-items属性 不常用
align-self: auto 默认 表示继承父元素
flex-start 与交叉轴的起点对齐。
flex-end 与交叉轴的终点对齐。
center 与交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
8、兼容无效：
justify-content: space-around 不能用
flex-wrap: wrap 不能用
9、flex兼容的标准写法
-webkit-前缀标准版
-moz-前缀标准版
标准版
-webkit-前缀09版示例：
.box{display: -ms-flexbox; display: -webkit-flex; display: flex; display: -webkit-box; display: -moz-box;
}10、新版的语法：
定义flex：
.box{display: -webkit-flex; /*webkit*/display: flex;
}
/*行内flex*/
.box{display: -webkit-inline-flex; /*webkit*/display:inline-flex;
}父元素属性：
.box{flex-direction: row | row-reverse | column | column-reverse;/*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/flex-wrap: nowrap | wrap | wrap-reverse;/*换行：不换行（默认） | 换行 | 换行并第一行在下方*/flex-flow: <flex-direction> || <flex-wrap>;/*主轴方向和换行简写*/justify-content: flex-start | flex-end | center | space-between | space-around;/*主轴对齐方式： 左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/align-items: flex-start | flex-end | center | baseline | stretch;/*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/align-content: flex-start | flex-end | center | space-between | space-around | stretch;/*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}子元素属性：
.item{order: <integer>; number/*排序：数值越小，越排前，默认为0*/flex-grow: <number>; /* default 0 *//*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/flex-shrink: <number>; /* default 1 *//*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/flex-basis: <length> | auto; /* default auto *//*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]/*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/align-self: auto | flex-start | flex-end | center | baseline | stretch;/*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
} 七：移动端布局用百分比和自动缩放布局
关于移动端布局和pc端写法相关推荐
- 如何使移动端项目在PC端依然可以良好的展示
前置条件: 移动端适配使用的是如下适配方案, 也就是使用的rem作为适配,该示例中用到的是13.333333vw, 使得1rem等于100px. html{font-size: 13.333333vw ...
- 手机桌面百度搜索框不显示热词_移动端搜索和PC端搜索的区别
随着智能手机的普及,移动端搜索量是越来越大了,在去年从未有人通过移动搜索我的博客,而到了今年,从通过统计工具的数据分析来看,已经有越来越多的用户通过手机搜索到我的博客. 有一段时间移动搜索来路很大的时 ...
- 网站加入代码让网页以电脑端打开_移动端网站和pc端网站的异同点
移动端网站和pc端网站的共性: 手机网站和电脑网站一样,都是需要有一个域名,一个存放源代码的空间,一套网站运行的源代码,访客通过在手机端输入域名访问. 移动端网站和pc端网站的区别: 电脑网站对应的屏 ...
- PHP如何分辨当前是移动端，还是PC端
/*** 客户端类型* $find = '' 判断:iphone,ipad,android'* $find = 'pc' 判断:windows* $find = 'ipad' 判断:ipad* $fi ...
- 基于vue2的移动端适配与pc端各一套样式
公司需求基于vue2的一套代码能适应pc端与移动端,检测到为pc端就显示pc端样式,检测为移动端就做适配 移动端rem适配,utils辅助文件夹里创建一个rem.js ps:此处是750设计稿,如需修 ...
- Day04 利用flex布局完成PC端网页设计CSS+html部分
没学JS,而且还是不会创建仓库,所还是干巴巴的代码了 HTML <!DOCTYPE html> <html lang="en"><head>&l ...
- html pc端万年历插件,# pc端个性化日历实现
pc端个性化日历实现 技术:vue => v-for.slot-scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot-scop 插槽域的知识点,将个性化 ...
- 百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
我们在之前的文章中已经做过富文本插件的调研. 富文本插件 Ueditor 是百度推出的一款开源在线 HTML 编辑器. http://fex-team.github.io/ueditor/ 比较好用, ...
- 史上最全的常用事件：移动端事件及PC端：鼠标/键盘/表单事件
PC端事件 鼠标事件: onclick点击 onmouseover鼠标移入 onmouseout鼠标移出 onmousedown鼠标按下 onmouseup鼠标抬起 onmousemove鼠标移动 o ...
最新文章
- springboot 各种日志打印
- python缩进符错误_python – 如何修复Pylint“错误的缩进”和PEP8 E121？
- c语言程序设计班档案管理系统报告,C语言班级档案管理系统
- frame中src怎么设置成一个变量_Go 语言设计哲学之七：变量声明须一致
- Linux系统的优缺点
- MatLab的排序函数-sort
- Java集合继承关系图
- PLC编程从入门到精通视频教程【副业学习会】
- U3D学习项目一：2D横版小狐狸闯关游戏（代码部分一）
- 东方博宜OJ 1056 - 【入门】所有不超过1000的数中含有数字3的自然数
- 晚安前学习——第1天
- 钉钉调用新版待办任务
- 启动数据库MySQL
- sql 数据库创建及建表，
- Java中的Dao是什么意思？
- 数字钱包助记词生成公私钥流程分析
- CMUSphinx免费离线语音识别开源库教程iOS开发
- c语言程序设计概述总结,c语言程序设计总结.docx
- 赞同科技产品开发部诚聘软件工程师
- voc数据 map f1计算
热门文章
- linux vim （your system doesn't appear to have the zip pgm）
- android 外部存储列表,如何获取Android设备的已安装外部存储列表
- php 自动寻路算法,PHP树-不需要递归的实现方法
- 荣耀v10玩flash游戏_“王者荣耀”游戏竟然还能这样玩？（送皮肤）
- DIoU Loss论文阅读
- 2019年网络规划设计师上午真题及答案解析
- 软考网络管理员学习笔记8之第八章网络安全技术
- linux shell脚本链接操作符,Shell脚本中的操作符
- 电梯管理php,写字楼物业电梯管理规定
- python animation set data_imshow.set_数据（）不适用于FuncAnimation