山西科技网站建设,制作网页完整步骤代码,关键词数据分析工具有哪些,wordpress 迁移上线目录 一、移动端基础
二、视口
三、二倍图/多倍图
四、移动端开发
#xff08;一#xff09;开发选择
#xff08;二#xff09;常见布局
#xff08;三#xff09;移动端技术解决方案
五、移动WEB开发之flex布局
六、移动WEB开发之rem适配布局
#END#xff08…目录 一、移动端基础
二、视口
三、二倍图/多倍图
四、移动端开发
一开发选择
二常见布局
三移动端技术解决方案
五、移动WEB开发之flex布局
六、移动WEB开发之rem适配布局
#END具体可观看b站pink老师css后续移动端视频
一、移动端基础
1. 移动端浏览器主要用于对webkit内核进行兼容
2. 内核
1 Webkit一个开源的浏览器引擎该引擎由苹果公司开发主要用于SafariDashboardMail 和其他一些Mac OS X 程序。
2Trident又称为IE内核采用Trident内核的浏览器有IE、傲游、世界之窗浏览器、Avant、腾讯TT、Sleipnir、GOSURF、GreenBrowser和KKman等。
3 Gecko又称为Firefox内核同时Gecko是一个跨平台内核可以在Windows、 BSD、Linux和Mac OS X中使用。
4 Blink由Google和Opera Software开发的浏览器排版引擎在Chrome28及往后版本、Opera15及往后版本和Yandex浏览器中使用。
3. 目前移动端开发针对于手机端
4. 移动端碎片化较严重原因分辨率和屏幕尺寸大小不同。 二、视口
1. 概念浏览器显示页面内容的屏幕区域
2. 分类布局视口、视觉视口、理想视口
3. 布局视口layout viewport不适合页面开发
1移动设备的浏览器一般都默认设置了一个布局视口用于解决早期的PC端页面在手机上显示的问题。
*iOS,Android基本能将视口分辨率设置为980px可手动缩放网页。
4. 视觉视口visual viewport
1用户所正在看的网站的区域
2可通过缩放操作视觉视口但不会影响布局视口即布局视口仍保持原本的宽度。
5. 理想视口ideal viewport
1为了使网站在移动端有最理想的浏览和阅读宽度而设定对设备来讲是最理想的视口尺寸
2需要手动添写meta视口标签
3采用理想视口的主要目的是让我们的设备与布局视口宽度一致。
6. meta视口标签
1标准的viewport设置
① 视口宽度和设备保持一致
② 视口的默认缩放比例1.0
③ 不允许用户自行缩放
④ 最大允许的缩放比例1.0
⑤ 最小允许的缩放比例1.0
2写法
meta nameviewport contentwidthdevice-width,user-scalableno,initial-scale1.0,maximum-scale1.0,minimum-scale1.0 三、二倍图/多倍图
*二倍精灵图做法
1. 在firework一个软件中将精灵图等比例缩放为原来的一半
2. 根据大小测量坐标
3. 代码设置为background-sizes精灵图原本宽度的一半。
*图片格式 1. 实质将准备的图片比实际需要的尺寸大小大两倍
2. 物理像素物理像素比
1物理像素点屏幕显示的最小颗粒是物理真实存在的即分辨率
2开发时的1px不一定等于1个物理像素PC端页面1px等于1个物理像素
3一个px能显示的物理像素点的个数称为物理像素比或屏幕像素比。
4Retina视网膜屏幕一种显示技术可以将更多的物理像素点压缩至一块屏幕中从而达到更高的分辨率并提高屏幕显示的细腻程度。
举例iPhone8中为750像素点但宽度375px的盒子将其占满1px2像素点物理像素比为2其中375×667为开发尺寸(px)。 3. 多倍图目的
1使用倍图来提高图片质量解决在高清设备中的模糊问题
2将准备的图片比实际需要的尺寸大小大几倍看实际需求
4. 背景缩放background-size
1规定背景图像的尺寸
2background-size背景图片宽度 背景图片高度
3单位:长度|百分比| cover| contain;
① cover把背景图像扩展至足够大以使背景图像完全覆盖背景区域background-sizecover
② contain把图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域。高度和宽度等比例拉伸、background-sizecontain
5. 相关代码
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylediv {width: 500px;height: 500px;border: 1px solid black;background: url(../2.旋转木马/1.png) no-repeat;/* background-size: 500px; *//*完全覆盖盒子*//* background-size: cover; *//*contain 高度和宽度等比例拉伸当宽度或高度铺满盒子就不再拉伸*/background-size: contain;}/style/headbodydiv/div/body
/html
未使用background-size 使用了background-size 使用cover 四、移动端开发
一开发选择
1. 单独制作移动端页面主流
1不改变原本的PC端页面单独制作一个页面
2通常情况下网址域名前面加m(mobile)可以打开移动端。通过判断设备如果是移动设备打开则跳到移动端页面。
2. 响应式页面兼容移动端其次
1优点通过屏幕宽度来改变样式以适应不同终端
2缺点制作麻烦需要解决兼容性问题。
二常见布局
1. 移动端技术选型
1单端制作移动端页面
① 流式布局百分比布局
② flex弹性布局
③ lessrem媒体查询布局
④ 混合布局
2响应式页面兼容移动端
① 媒体查询
② bootstarp
2. 流式布局
1流式布局就是百分比布局也称非固定像素布局。
2通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸宿不受固定像素的限制内容向两侧填充。
3流式布局方式是移动web开发使用的比较常见的布局方式。
max-width最大宽度 min-width最小宽度
max-height最大高度 min-height最小高度 三移动端技术解决方案
1. 移动端浏览器
1移动端浏览器基本以webkit内核为主因此考虑webkit兼容性问题可使用H5标签和CSS3样式
2浏览器的私有前缀只需要考虑添加webkit即可
2. css初始化normalize.css的优点
1保护了有价值的默认值
2修复了浏览器bug
3是模块化的
4拥有详细的文档
3. css3盒子模型box-sizing
1传统模式宽度计算:盒子的宽度CSS中设置的width border padding
2CSS3盒子模型:盒子的宽度CSS中设置的宽度width里面包含了border和padding也就是说CSS3中的盒子模型padding和border不会撑大盒子了
4. 特殊样式 五、移动WEB开发之flex布局
1. 传统布局和flex布局
1传统布局
① 兼容性好、布局繁琐
② 局限性不能再移动端很好地布局
2flex弹性布局
① 操作方便布局极为简单移动端应用很广泛
② PC端浏览器支持情况较差
③ IE11或更低版本不支持或仅部分支持。
2. flex布局与普通布局对比
1未加displayflex
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleflex/titlestylediv {width: 80%;height: 300px;background-color: skyblue;}div span {width: 200px;height: 100px;margin-right: 5px;background-color: pink;border: 1px solid black;}/style/headbodydivspan1/spanspan2/spanspan3/span/div/body
/html2加了displayflex
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleflex/titlestylediv {display: flex;justify-content: space-around;width: 80%;height: 300px;background-color: skyblue;}div span {width: 200px;height: 100px;margin-right: 5px;background-color: pink;border: 1px solid black;flex: 1;}/style/headbodydivspan1/spanspan2/spanspan3/span/div/body
/html3. 布局原理
1当父盒子设为flex布局以后子元素的float、clear和vertical-align属性将失效
2伸缩布局 弹性布局 伸缩盒布局 弹性盒布局 flex布局
3通过给父盒子添加flex属性来控制子盒子的位置和排列方式。
4. 常见的父项属性
1flex-direction :设置主轴的方向
① 在flex布局中分为主轴和侧轴也称为行和列、x轴和y轴
② 默认主轴方向就是x轴方向水平向右默认侧轴方向就是y轴方向水平向下。 ③ 具体代码及结果
stylediv {/* 給父级添加flex属性 */display: flex;/* 默认的主轴是x轴 行 row 那么Y轴是侧轴且我们的元素根据主轴来排列*//* 翻转 *//* flex-direction: row-reverse; *//* y轴 */flex-direction: column;width: 80%;height: 300px;background-color: skyblue;}div span {width: 200px;height: 100px;margin-right: 5px;background-color: pink;border: 1px solid black;flex: 1;}
/stylebodydivspan1/spanspan2/spanspan3/span/div
/body 2justify-content :设置主轴上的子元素排列方式 ① 具体代码及结果
stylediv {/* 給父级添加flex属性 */display: flex;/* 默认的主轴是x轴 行 row 那么Y轴是侧轴且我们的元素根据主轴来排列*/flex-direction: row;/* justify-content:设置主轴上排列方式; *//* justify-content: center; *//* 平分剩余空间 *//* justify-content: space-around; *//* 先两边贴边再分配剩余的空间 */justify-content: space-between;width: 80%;height: 300px;background-color: skyblue;}div span {width: 200px;height: 100px;margin-right: 5px;background-color: pink;border: 1px solid black;}
/stylebodydivspan1/spanspan2/spanspan3/span/div
/body 3flex-wrap :设置子元素是否换行
① 默认情况下项目都排在一条线上又称“轴线”flex-wrap属性定义flex布局中默认不换行。
② 属性分为nowrap不换行和wrap换行
③ 具体代码和结果
stylediv {/* 給父级添加flex属性 */display: flex;width: 600px;height: 300px;background-color: skyblue;/* flex布局中默认的子元素是不换行的如果装不开会缩小子元素的宽度放到父元素中 */flex-wrap: wrap;}div span {width: 150px;height: 100px;margin: 10px;background-color: pink;}
/stylebodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/span/div
/body 4align-content :
① 设置侧轴上的子元素的排列方式(多行)设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行在单行下是没有效果的
② 属性值 ③ 具体代码和结果
stylediv {/* 給父级添加flex属性 */display: flex;width: 600px;height: 400px;background-color: skyblue;flex-wrap: wrap;/* 因为有了换行此时侧轴上控制子元素的对齐方式为align-content *//* align-content: center; *//* align-content: space-between; */align-content: space-around;}div span {width: 150px;height: 100px;margin: 10px;background-color: pink;}
/stylebodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/span/div
/body
5align-items :设置侧轴上的子元素排列方式(单行)
① 在子项为单项单行的时候使用
② 属性值
③ 具体代码和结果
stylediv {/* 給父级添加flex属性 */display: flex;width: 600px;height: 400px;background-color: skyblue;/* 默认主轴是x轴 */justify-content: center;/* 侧轴居中 *//* align-items: center; *//* 拉伸但是子盒子不要给高度 *//* align-items: stretch; */align-items: center;}div span {width: 150px;/* height: 100px; */margin: 10px;background-color: pink;}
/stylebodydivspan1/spanspan2/spanspan3/span/div
/body *align-items与align-content的区别
① align-items 适用于单行情况下只有上对齐、下对齐、居中和拉伸
② align-content 适用于换行(多行的情况下单行情况下无效可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
③ 总结就是单行找align-items 多行找 align-content。
6flex-flow :复合属性相当于同时设置了flex-direction和flex-wrap。
flex-flow: row wrap;5. flex布局子项常见属性
1flex子项目占的份数
① flex属性定义子项目分配其剩余空间用flex设置所占份数
② 具体代码和结果
stylesection {display: flex;width: 60%;height: 150px;background-color: skyblue;margin: 100px auto;}section div:nth-child(1) {width: 100px;height: 150px;background-color: aquamarine;}section div:nth-child(2) {flex: 1;background-color: pink;}section div:nth-child(3) {width: 100px;height: 150px;background-color: cornflowerblue;}p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}p span {flex: 1;border: 1px solid black;}p span:nth-child(2) {flex: 2;}
/stylebodysectiondiv/divdiv/divdiv/div/sectionpspan1/spanspan2/spanspan3/span/p
/body2align-self :控制子项自己在侧轴的排列方式
① align-self属性允许单个项目有与其他项目不同的对齐方式可覆盖align-items属性
② 默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch
3order :定义子项的排列顺序前后顺序
① 数值越小排列越靠前默认为0。
② 具体代码和结果
stylediv {display: flex;width: 80%;height: 300px;background-color: pink;/* 让三个盒子沿侧轴底侧对齐 *//* align-items: flex-end; *//* 只想让三号盒子沿侧轴底侧对齐 */}div span {width: 150px;height: 100px;background-color: skyblue;margin-right: 5px;}div span:nth-child(2) {/* 默认是0-1比0小所以在前面 */order: -1;}div span:nth-child(3) {align-self: flex-end;}
/stylebodydivspan1/spanspan2/spanspan3/span/div
/body *线性渐变必须加上浏览器私有前缀
起始方向可以是:方位名词或者度数如果省略默认就是top。 具体代码及结果
stylediv {width: 600px;height: 180px;background: -webkit-linear-gradient(top left, red, blue);}
/style 六、移动WEB开发之rem适配布局
1. 基础和特点
1rem (root em)是一个相对单位类似于em
2em是父元素字体大小而rem的基准是相对于html元素的字体大小
例如根元素(html设置font-size:12px非根元素设置width:2rem则换成px表示就是24px。
3可以通过修改html里面的文字大小来改变页面中元素的大小从而整体控制。
2. 媒体查询
1特点
① 使用media查询可以针对不同的媒体类型定义不同的样式
② media可以针对不同的屏幕尺寸设置不同的样式
③ 当重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面
④ 应用广泛目前针对很多苹果手机、Android手机平板等。
2语法规范
media mediatype and|not|only (media feature){CSS-Code;
}
① 使用media开头
② mediatype媒体类型
③ 关键字and not only
④ media featur媒体特性必须包含在小括号内。
3媒体特性
① 每种媒体类型都具有不同的特性根据不同的媒体类型的媒体特性可设置不同的展示风格包含在小括号里
② 属性值
③ 具体代码及结果
/* 这句话的意思是在屏幕上并且最大的宽度是800像素 */
/* max-width 小于等于 */
/* 此处代表当body的宽度小于等于800像素时则背景颜色为skyblue */
media screen and (max-width: 800px) {body {background-color: skyblue;}
}media screen and (min-width: 800px) {body {background-color: pink;}
} 4引入资源
① 原理直接在link中判断设备的尺寸根据不同的尺寸引用不同的css文件
② 语法规范
link relstylesheet mediamediatype and|not|only (media feature) hrefmystylesheet.css 3. less基础
1css缺点
① CSS是一门非程序式语言没有变量、函数、SCOPE (作用域等概念
② CSS需要书写大量看似没有逻辑的代码CSS冗余度是比较高的
③ 不方便维护及扩展不利于复
④ CSS没有很好的计算能力
⑤ 非前端开发工程师来讲往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
2less介绍
*总结Less是一门css预处理语言扩展了css的动态特性。
① Less ( Leaner Style Sheets的缩写是一门CSS扩展语言也成为CSS预处理器
② 做为CSS的一种形式的扩展它并没有减少CSS的功能而是在现有的CSS语法上为CSS加入程序式语言的特性
③ 在CSS的语法基础之上引入了变量Mixin混入运算以及函数等功能大大简化了CSS的编写并且降低了CSS的维护成本就像它的名称所说的那样Less 可以让我们用更少的代码做更多的事情。
3Less使用
① Less变量
变量是指没有固定的值可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
格式变量名值
变量命名规范
a. 必须以为前缀
b. 不能包含特殊字符
c. 不能以数字开头
d. 大小写敏感。 ② less编译
a. 本质上Less包含—套自定义的语法及一个解析器用户根据这些语法定义自己的样式规则这些规则最终会通过解析器编译生成对应的CSS文件。即将文件后缀名设置为less
b. 编译方法使用vocode less插件Easy LESS插件用来把less文件编译为css文件。 ③ less嵌套
① 具体代码和结果
//less文件中的代码
.header {width: 200px;height: 200px;background-color: pink;// 1.less嵌套 子元素的样式直接写到父元素里面a {color: red;font-size: 20px;// 2.伪类选择器、伪元素选择器、交集选择器需要再内层选择器的前面加:hover {color: blue;}}
}.nav {font-size: 30px;width: 300px;height: 300px;background-color: skyblue;.logo {color: red;}::before {content: ;display: block;width: 100px;height: 100px;background-color: purple;}
}
//css文件中的代码
.header {width: 200px;height: 200px;background-color: pink;
}
.header a {color: red;font-size: 20px;
}
.header a:hover {color: blue;
}
.nav {font-size: 30px;width: 300px;height: 300px;background-color: skyblue;
}
.nav .logo {color: red;
}
.nav::before {content: ;display: block;width: 100px;height: 100px;background-color: purple;
} ④ less运算
a. 运算符的左右两侧必须加上空格
b. 两个数参与运算如果只有一个数有单位则最终结果以这个单位为准
c. 两个数参与运算如果两个数都有单位且单位不一样则最终结果以第一个单位为准。
d. 具体代码和结果
//less文件中代码
border: 5px 5;
div {width: (200px - 50) * 2;height: 200px * 2;border: border solid black;background-color: #666 - #222;
}
img {width: (82rem / 50px);height: (82 / 50rem);
}
//css文件中代码
div {width: 300px;height: 400px;border: 10px solid black;background-color: #444444;
}
img {width: 1.64rem;height: 1.64rem;
}4rem适配方案
① 适配目标
使一些不能等比自适应的元素当设备尺寸发生改变时等比例适配当前设备。
② 如何实现目标
使用媒体查询根据不同设备按比例设置html的字体大小然后页面元素使用rem做尺寸单位当html字体大小变化时元素尺寸也会发生变化从而达到等比缩放的适配。
③ 如何在实际开发中使用
按照设计稿与设备宽度的比例动态计算并设置html根标签的font-size大小;媒体查询)
CSS中设计稿元素的宽、高、相对位置等取值按照同等比例换算为rem为单位的值;
④ rem适配方案技术使用市场主流
a.less媒体查询rem
b.flexible.jsrem
⑤ 最终公式页面元素的rem值 页面元素值(px) / (屏幕宽度 / 划分的份数)
a. 屏幕宽度 / 划分的份数html中font-size的大小
b. 也可为页面元素的rem值 页面元素值(px) / (html中font-size的大小) #END具体可观看b站pink老师css后续移动端视频
