菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育
标题:
移动端WEB开发流式布局和Flex布局-陈旭辉-20230425
[打印本页]
作者:
陌殇
时间:
2023-4-26 01:10
标题:
移动端WEB开发流式布局和Flex布局-陈旭辉-20230425
一、学习内容
1.浏览器现状
PC常见浏览器：QQ、UC、edge、谷歌、火狐、苹果浏览器等等。
移动端常见浏览器：QQ浏览器、UC浏览器、百度手机浏览器、夸克浏览器、搜狗浏览器等等
国内的浏览器的内核都是基于webkit内核修改过来的，所以如果有需要处理的兼容性问题，就主要处理webkit内核的兼容性即可。
2.手机屏幕现状
安卓手机的主要的分辨率：
480×800、480×854、720×1280、1080×1920、2700x1220像素等等。
苹果手机的主要分辨率
640×960、640×1136、750×1334、1242×2208、2556 x 1179等等。
作为开发来说，我们不需要太多的关注分辨率的问题，因为正常去开发网页的时候都是用px尺寸单位。
3.移动端的调试方法
1、使用谷歌开发者工具 Chrome DevTools的模拟手机调试
2、搭建本地服务器，手机和服务器在一个局域网内
3、使用外网服务器，直接用IP来进行访问
4.
移动端常见布局方案
1、单独来制作移动端（主流）：
流式布局、
flex弹性布局、
less+rem+媒体查询、
混合布局
2.响应式布局（次要）：1、媒体查询2、Bootstrap
CSS的2D转换
1.
属性 transform：
translate(x,y) 对盒子的X和Y轴进行位移
translateX(n) 对盒子进行x轴的位移
translateY(n) 对盒子进行y轴的位移
2.注意点：1、translate不会影响其他的元素位置2、translate中的百分比单位是相对于元素自身的宽高来进行设定的 比如 transform:translate(50%,50%)；3、对行内标签没有效果
欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)
Powered by Discuz! X3.4