移动端布局学习笔记

最新推荐文章于 2022-03-31 13:35:42 发布
最新推荐文章于 2022-03-31 13:35:42 发布
阅读量283 收藏
点赞数
分类专栏： 菜鸡 文章标签： 菜 真菜啊 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq939197294/article/details/84851734
版权

在连续献祭了公司无数个H5项目之后终于对移动端的布局有了一丢丢的感悟哈哈哈哈~~
日记形式大佬勿喷
那就是 百分比+rem
百分比用于每块内容的布局，rem用于最内部文字icon以及logo的设计。
红色色块全部使用的百分比布局，黄色区域才使用rem进行不同屏幕的适配
这样做的好处大概就是……
第一 不同宽度的手机使用百分比布局不会产生内容溢出
第二 icon使用rem布局避免扭曲（百分比扭曲了）
自我积累 有心得随时更新

vw vh 真香！

九千寒水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端小白移动端布局总结（含四大实战项目）及笔记
01-08
前言 眼看着做两顿凉皮的功夫，2020第一季度就要过完了。 过去的三个月，好像经历了很多，又好像什么都没留下。 这种茫然的背后，是我们特殊时期害怕被淘汰的一种自我审视。看到百度数据显示，疫情期间日均超3.5亿人次搜索、浏览教育相关的内容，同比上涨86%。 在这个人人都准备抓住机会弯道超车的时期，你准备学点什么？现在就冲！和博主一起学前端吧。 截至发表博文前的最新数据： 那么我们正式步入正题吧，为了方便大家查阅，我把页面效果，部分源代码，以及我整理的学习笔记，以文本和xmind的格式导出了，如有需要，可以私信。 1.移动端基础 浏览器现状 国内的UC和QQ等手机浏览器都是根据webkit修
移动端流式布局的学习
qq_55061624的博客
09-01 78
移动端流式布局的学习 background-size的学习： background-size:图片的宽度，图片的高度; 1.只写一个参数那么一定是宽度，高度会等比例缩放 2.单位可以不用 px ，而用 % ，这是相对父盒子来说的百分比 3.特殊参数：cover ，等比例拉伸，要完全覆盖盒子，可能会有部分背景图片显示不全。 background-size：cover； 4.特殊参数：contain，高度和宽度等比例拉伸，当宽度或高度其中一个铺满盒子就不再进行拉伸了，可能有空白区域。background-s
移动端布局——移动端基础知识
m0_45659764的博客
03-31 260
一、移动端特点 PC端网页和移动端网页有什么不同？ PC屏幕大，网页固定版心 手机屏幕小，网页宽度多数为100% 如何在电脑里面边写代码边调试移动端网页效果？ 谷歌模拟器 1.1 屏幕尺寸（了解） 屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量 1.2 分辨率 PC分辨率 1920*1080 1366*768 ..... 缩放150% (1920/150%)*(1080/150%) 总结 硬件分辨率（出厂设置） 缩放调节的分辨率（软件设置） 分辨率分类 物理...
移动端布局最全基础知识+流式布局 学习记录
卷尾巴
04-14 376
1.移动端基础 1.1浏览器现状 *国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android开发的一样 *兼容移动端主流浏览器，处理Webkit内核浏览器即可 1.2手机屏幕现状 *移动端设备屏幕尺寸非常多，...
移动端web学习笔记.doc
07-23
移动端web学习笔记,初步学习移动端网页的注意点，顶部搜索设置三栏自适应，轮播图如何设置以及媒体查询拓展，栅格系统，行列的设置以及各参数的作用移动端web学习笔记,初步学习移动端网页的注意点，顶部搜索设置三栏...
HTML5与移动端web学习笔记
02-26
新的HTML元素，例如section,nav,header,footer,article等用于绘画的Canvas元素用于多媒体播放的video和audio元素用于定位的GeolocationAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI手机网页开发。...
Extjs学习笔记之七 布局
01-19
1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局。通过x,y来指定。 示例用法： 代码如下: new Ext.Panel({ layout: ‘absolute’, title: ‘AbsuluteLayout’, renderTo: document.body, frame: true, ...
移动端CSS的学习笔记。
01-19
移动端CSS的学习笔记。
移动端布局学习小结
qq_28223305的博客
01-11 285
1 calc 计算单位             //-------->只支持高级浏览器 width:calc(500px - 100px) //--400px; 中间一定要有空格 + - * / %都可以。 2 去边框布局自适应  可以用 box-sizing:border-box(全局)   也可以用 width:calc(100/3 - 2px)   (意
子比主题ACG美化插件全开源
05-25
子比主题ACG美化插件[全开源] 不要改人家原作者版权，不要用于违法乱纪
vgg模型-图像分类算法对大米体型识别-不含数据集图片-含逐行注释和说明文档.zip
05-25
vgg模型_图像分类算法对大米体型识别-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,是将数据集文件夹下
shufflenet模型-通过CNN卷积神经网络的手势数字识别-不含数据集图片-含逐行注释和说明文档.zip
05-25
shufflenet模型_通过CNN卷积神经网络的手势数字识别-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.
Python优秀项目 基于Flask+sklearn实现的数据挖掘可视化系统源码+部署文档+全部数据资料.zip
05-25
CSDN IT狂飙上传的代码均可运行，功能ok的情况下才上传的，直接替换数据即可使用，小白也能轻松上手 【资源说明】 Python优秀项目 基于Flask+sklearn实现的数据挖掘可视化系统源码+部署文档+全部数据资料.zip 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据提示GPT修改；若不会，私信博主（问题描述要详细） 3、运行操作步骤 步骤一：将代码的项目目录使用IDEA打开（IDEA要配置好python环境） 步骤二：根据部署文档或运行提示安装项目所需的库 步骤三：IDEA点击运行，等待程序服务启动完成 4、python资讯 如需要其他python项目的定制服务，可后台私信博主（注明你的项目需求） 4.1 python或人工智能项目辅导 4.2 python或人工智能程序定制 4.3 python科研合作 Django、Flask、Pytorch、Scrapy、PyQt、爬虫、可视化、大数据、推荐系统、人工智能、大模型
uTorent 下载软件
最新发布
05-25
uTorrent 是一个 BT 下载客户端。功能全面，甚至在有些方面（如计划流量功能）更胜其他 BT 下载工具，经测试下载速度并不输给号称 “内网下载速度之王” 的 Bitcomet，但对系统资源的占用却小很多，软件无需安装或解压，直接下载运行即可。界面简洁大方。
Redis Go客户端.zip
05-25
Redis Go客户端
alexnet模型-通过CNN训练识别番茄叶病虫害-不含数据集图片-含逐行注释和说明文档.zip
05-25
alexnet模型_通过CNN训练识别番茄叶病虫害-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,是将数
resnet模型-基于人工智能的卷积网络训练识别书籍封面-不含数据集图片-含逐行注释和说明文档.zip
05-25
resnet模型_基于人工智能的卷积网络训练识别书籍封面-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,
中文video caption模型和项目1
05-25
中文video caption模型和项目1
python打开移动端有道云笔记
04-29
可以使用有道云笔记提供的 API 接口来实现Python打开移动端有道云笔记的功能，具体步骤如下： 1. 登录有道云笔记开放平台（https://note.youdao.com/open/developguide.html）并创建应用，获取应用的 appKey 和 app...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值