网站建设公司费,个人网站建设 免费下载,长沙seo网络优化,电商网站 网站服务内容一、移动端基础知识
1.PC端和移动端区别
移动端#xff1a;手机版网页#xff0c;手机屏幕小#xff0c;网页宽度多数为100%#xff0c;没有版心
PC端#xff1a;电脑版网页#xff0c;屏幕大#xff0c;网页固定版心
PC端和移动端不是同一个网页
2.如何在电脑里面…一、移动端基础知识
1.PC端和移动端区别
移动端手机版网页手机屏幕小网页宽度多数为100%没有版心
PC端电脑版网页屏幕大网页固定版心
PC端和移动端不是同一个网页
2.如何在电脑里面边写代码边调试移动端网页效果
使用谷歌浏览器查看源代码使用谷歌模拟器
3.分辨率
1屏幕尺寸指的是屏幕对角线的长度一般使用英寸来度量
2PC分辨率越高越好
1920 * 1080 横着能显示1920个像素点竖着能显示1080个像素点
1366 * 768 3 缩放150%放大150%则横着能显示的像素点变少了
公式1920 / 150% *1080 / 150%
4分辨率分类
物理分辨率是生产屏幕时就固定的它是不可被改变的
逻辑分辨率是由软件驱动决定的
写代码时尽量使用逻辑分辨率 4.视口移动端
视口标签的作用实现网页的宽度跟如手机设备宽度一样
注PC端视口不用考虑跟逻辑分辨率一致默认100%移动端默认980
不用记HTML中有
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!-- 视口标签 viewport即视口--meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html
5.二倍图即比例关系2:1750像素的图
移动端一般参考iPhone6/7/8这款手机出设计稿来写代码
设计师给的搞像素是750而不是375即写代码以750像素来写原因让图片更加清晰 图片分辨率为了高分辨率下图片不会模糊失真
做网站开发以二倍图居多 将设计稿放到Pxcook像素大厨里面点击“ 开发 ”模式
--设计图1x / 2x-- 2x模式即375px书写代码时注意要转换为2x模式来测量宽度 因为要基于逻辑分辨率375
6.百分比布局流式布局
效果宽度自适应高度固定
D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.3.1素材(8)\素材
二、Flex布局/弹性布局
D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.3.2素材(9)\素材
1.flex简介 网站https://caniuse.com/用来查询哪些浏览器是否兼容某个标签、。。。
2.flex组成 注
1.父元素上一级亲爹
2.弹性容器父元素亲爹即弹性盒子
3.默认主轴在水平侧轴在垂直方向
3.Flex--主轴对齐方式justify-content 注
space-around:视觉效果子级之间的距离是父级两头距离的2倍space-between间距在弹性盒子子级之间space-evenly所有地方的间距都相等4.Flex--侧轴对齐方式
align-items添加到父级上
align-self添加到子级上 align-items: centeralign-items: stretch; 拉伸默认值测试时去掉子级高度如果将子级高度注释掉弹性盒子沿着主轴线拉满整个盒子 align-self: center;5.弹性盒子尺寸特点
单独设置某个弹性盒子子级的对齐方式若弹性盒子子级没有给宽度or高度则按内容的高度来定 6.flex--伸缩比
属性 flex值
取值分类 数值整数
注意只占用父盒子剩余尺寸的份数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box {display: flex;height: 300px;border: 1px solid #000;}.box div {height: 200px;margin: 0 20px;background-color: pink;}.box div:nth-child(1) {width: 50px;}.box div:nth-child(2) {flex: 3;}.box div:nth-child(3) {flex: 1;}/style
/head
bodydiv classboxdiv1/divdiv2/divdiv3/div/div
/body
/html 上述编码除去1盒子所占尺寸宽度父级的剩下尺寸2盒子占3份3盒子占1份
