镇江网站设计建设,瑞金网络推广,门网站制作,手机推广软文移动端学习总结 (适合于复习)
移动端基础
技术选型#xff1a; 单独制作移动端页面#xff08;主流#xff09; 流式布局#xff08;百分比布局#xff09;flex弹性布局#xff08;强烈推荐#xff09;lessrem媒体查询布局混合布局 响应式页面兼容移动端#xff08;…移动端学习总结 (适合于复习)
移动端基础
技术选型 单独制作移动端页面主流 流式布局百分比布局flex弹性布局强烈推荐lessrem媒体查询布局混合布局 响应式页面兼容移动端其次 媒体查询BootStrap
meta视口标签
meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalabelno, maximum-scale1.0, minimum-scale1.0一些特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;/*点击高亮我们需要清除设置为transparent透明色*/
* {-webkit-tap-highlight-color: transparent;
}/*移动端浏览器IOS加上这个属性才能给按钮和输入框自定义样式*/
input {-webkit-appearance: none;
}/*禁用长按页面时的弹出菜单*/
img, a {-webkit-touch-callout: none;
}less基础 LessLeaner Style Sheets 的缩写是一种向后兼容的 CSS 语言扩展。 这是 Less 语言和 Less.js 的官方文档Less.js 是将 Less 样式转换为 CSS 样式的 JavaScript 工具。 因为 Less 看起来就像 CSS所以学习起来很容易。 Less 只对 CSS 语言做了一些方便的补充这也是它可以学得这么快的原因之一。 less安装
安装less
npm install less -g查看安装版本
lessc -v编译less文件
lessc style.less style.cssvscode安装easy less插件
保存就会自动编译为css文件vscode安装插件cssrem可以让px单位自动转换为rem单位
当让我们需要在 设置 - 拓展设置 - cssRem config - 修改默认的根字体大小 (也就是你的设计稿尺寸/划分的份数)less变量
变量名值;
命名规范
必须有 为前缀不能包含特殊字符不能以数字开头大小写敏感 color: rgb(0, 0, 0);
height: 200px;
baseFont: 50px;div {background-color: hotpink;height: height;color: color;
}less嵌套和计算
/*最新版的less在使用除法运算时需要加 英文括号 或者使用 ./ */
* {padding: 0; margin: 0 auto;}
html {font-size: baseFont}
//less嵌套
.outer {font-size: 16px;height: 6rem;width: (300rem / baseFont);//width: 300rem ./ baseFont;margin: 0 auto;border: 1px solid antiquewhite;background-color: olive;border-radius: 10%;padding: 10px;.inner {background-color: #9198e5;height: 1rem;width: 50px;margin: 0 auto;border-radius: 10%;text-align: center;a {color: color;display: inline-block;text-decoration: none;transition: all 0.2s linear;//给a标签添加鼠标悬浮样式:hover {color: #ff96ce;transform: scale(1.2);}}//给inner类添加鼠标悬浮样式:hover {}}
}布局方式
流式布局
也就是百分比布局你想让这个元素占用父元素的多大宽度直接设置相应的宽度百分比即可
优点
优点很明显可以适应屏幕宽度的变化父盒子宽度的变化自身的宽度也会相应的去改变避免了留白
缺点
因为宽度是由百分比来定义的高度和文字大小使用px来设定的所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长但是高度﹑文字大小还是和原来一样(即这些东西无法变得“流式”显示非常不协调
媒体查询
语法规范
用media 开头注意符号mediatype媒体类型screen、print关键字 and、 not、 onlymedia feature 媒体特性要有括号包裹
示例
嵌入在style标签里面
media screen|print and|not|only (max-width320px) {}引入资源
!--在符合这个媒体条件时引入相应的样式文件--
link relstylesheet hrefindex.css mediascreen and (min-width750px)通过媒体查询改变html font-size大小从而实现页面使用rem为单位的元素也相应的缩放改变从而实现适配不同宽度的设备 简单地例子
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle* {padding: 0;margin: 0 auto;}html, body {font-size: 50px;}.outer {height: 500px;width: 500px;background-color: khaki;border: 1px solid cadetblue;border-radius: 5%;padding: 5px;}.inner {height: 2rem;width: 2rem;background-color: #e66465;}/*当屏幕宽度大于等于900px时应用以下样式配合html根元素的font-size的大小改变使用rem单位的元素大小也会相应的变化*/media screen and (min-width: 700px) {.inner {background-color: linen;}html {font-size: 70px;}}media screen and (min-width: 800px) {.inner {background-color: #f5bb84;}html {font-size: 100px;}}media screen and (min-width: 900px) {.inner {background-color: #ef7b05;}html {font-size: 120px;}}/style
/head
body
div classouterdiv classinner/div
/div
/body
/html
flex弹性布局
通过设置元素的display属性为flex块状元素或者inline-flex内联元素便可以将一个盒子指定为伸缩盒子其子元素也都便成为伸缩项目子元素的float、clear和vertical-align属性将失效, 伸缩子元素也可通过设置display:flex指定成伸缩盒子也就是伸缩盒子可以嵌套 。
注意并不是所有的浏览器都能支持伸缩盒子IE11、Firefox20.0、Opera12.1、Chrome21.0以及Safari6.1能支持。
父元素所具有的属性
1. 主轴方向flex-direction: row (default) / column / row-reverse / column-reverse2. 主轴排列方式justify-content: flex-start (default) / flex-end / center / space-between / space-around / space-evenly3. 纵轴排列方式针对纵轴只有单行有效align-items: flex-start / flex-end / center / stretch(default) / space-between / space-around / baselinestretch子元素未设置高度或者是高度为auto那么子元素将被拉伸以适应容器是默认值4. 纵轴排列方式针对纵轴有多行有效align-content: flex-start / flex-end / center (default) / space-between / space-around / space-every5. 主轴宽度不够是否可以换行默认不可换行flex-wrap: wrap / no-wrap (default) / wrap-reverse6. 复合属性简化 主轴方向 和是否 可换行flex-flow: flex-direction flex-wrap子元素所具有的的属性
1. 子项顺序order: 0(默认)
用整数值来定义伸缩容器子元素的排列顺序默认是0可以为负值数值越小越排在前面2. 子项伸缩复合属性flex: 0 (默认) / 自己可以给各个子项划分份数来达到自定义布局的需求3. 子项自身纵向排布(默认继承align-items的值单独设置覆盖此时局域底部)align-self: flex-start / flex-end / centerrem布局
先来聊聊 em 和 rem 的区别
em相对于父元素的fontsize大小来设置大小的设置的值为父元素的fontsize大小的几倍
em参考的是它的父级font-size大小
rem参考的是html根元素的font-size大小rem实际开发适配方案
根据设备宽度的不同动态的计算并设置html根标签的font-size大小(可以使用媒体查询在到达某个宽度值时设置对应的font-size也可以使用flexible.js)CSS 中设计稿元素的宽、高相对位置等的取值按照同等比例换算为rem为单位的值(配合less的计算可以很方便)
rem实际开发适配方案1
原理动态设置html根标签的 font-size 大小
假设给定的设计稿是750px我们可以把整个屏幕划分为15等分划分标准不一也可以是20份或10份都可以每一份作为html字体的大小这里就是 750px / 15 50px那么在320px设备的时候字体大小就是 320 / 15 21.33px用我们页面元素的大小(document.documentElement.clientWidth)除以不同的html字体大小会发现他们比例还是相同的
比如我们以750为标准设计稿
一个100*100像素的页面元素在750屏幕下就是100/50 2rem 2rem * 2rem比例是1:1在320屏幕下html的字体大小为21.33则2rem 42.66px此时宽高都是2rem 42.66px宽高仍是1:1可以实现在不同屏幕下页面元素盒子等比缩放的效果
元素大小取值方法
最后的公式页面元素的rem值 页面的宽度 / 屏幕宽度 / 划分的份数
屏幕宽度/划分份数就是html font-size的大小
也就是页面元素的rem值 页面的宽度 / html font-size字体大小
市场主流rem适配方案 rem less 媒体查询 flexible.js rem
两种方案都存在方案二更简单。
flexible.js
手机淘宝团队开发的简洁高效 移动端适配库
我们咋也不需要写不同屏幕的媒体查询因为js里面做了处理
原理
把当前设备的宽度划分为10等份根据不同的设备的宽度尺寸来改变html font-size的大小从而来达到页面元素随之变化适配不同宽度设备的目的
比如当前的设计稿是750px那我们只需要把html文字大小设置为75px(750px/10)就可以了
页面里元素的rem值设计稿元素的像素值px/75
接下来在不同尺寸的设备就交给flexible.js去改变html font-size的值就好了
flexible.js源码
(function flexible (window, document) {var docEl document.documentElementvar dpr window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize (12 * dpr) px}else {document.addEventListener(DOMContentLoaded, setBodyFontSize)}}setBodyFontSize();// set 1rem viewWidth / 10function setRemUnit () {var rem docEl.clientWidth / 10docEl.style.fontSize rem px}setRemUnit()// reset rem unit on page resizewindow.addEventListener(resize, setRemUnit)window.addEventListener(pageshow, function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr 2) {var fakeBody document.createElement(body)var testElement document.createElement(div)testElement.style.border .5px solid transparentfakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight 1) {docEl.classList.add(hairlines)}docEl.removeChild(fakeBody)}
}(window, document))
响应式布局开发
响应式需要一个父级做为布局容器来配合子级元素来实现变化效果
原理就是在不同屏幕下通过媒体查询来改变这个布局容器的大小再改变里面子元素的排列方式和大小从而实现不同屏幕下看到不同的页面布局和样式变化。
特点一套代码响应多端(手机端、平板端、PC端共用一套代码)
平时我们的响应式尺寸划分
超小屏幕(手机小于768px):设置宽度为100%小屏幕平板大于等于768px设置宽度为750px中等屏幕桌面显示器大于等于992px宽度设置为970px大屏幕大桌面显示器大于等于1200px宽度设置为1170px
我们也可以根据实际自己自定义划分
响应式开发简单示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle* {padding: 0; margin: 0;}html, body {height: 100%;width: 100%;}/* 超小屏幕小于768px 设置宽度为100%(手机)小屏幕大于768px,设置宽度为750px(平板)中等屏幕大于992px,设置宽度为970px(桌面显示器)大屏幕大于1200px, 设置宽度为1170px(大屏显示器)*/.container {background-color: #9198e5;width: 100%;min-width: 320px;height: 70%;margin: 0 auto;display: flex;flex-flow: row wrap;padding: 10px 10px;box-sizing: border-box;text-align: center;/*align-content: flex-start;*/}.container div {width: 100%;/*border: 1px solid #e66465;*/border-radius: 20px;box-sizing: border-box;/*margin: 10px 0;*/padding: 10px;background-clip: content-box;background-color: #e66465;/*height: 100px;*/}media screen and (min-width: 768px){.container {width: 750px;}.container div {width: 50%;}}media screen and (min-width: 992px){.container {width: 970px;}.container div {width: 33.33%;}}media screen and (min-width: 1200px){.container {width: 1170px;}.container div {width: 25%;}}/style
/head
bodydiv classcontainerdiv导航1/divdiv导航2/divdiv导航3/divdiv导航4/divdiv导航5/divdiv导航6/divdiv导航7/divdiv导航8/div/div
/body
/html
响应式UI框架 BootStrap
