移动端页面构建需注意?
1、 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
2、 浮动问题:如果中间有盒子是浮动的,则需要把下边的盒子设置为定位的话,可以选择设置距离底部的距离让其向下(bottom:0),这时又需要给他们的外边的最大盒子设置为子绝父相的形式,并操作捷径给整个大盒子设置固定的高度。
3、 视频标签引用问题:尽量都是用video标签,ifarme,embed有可能会出现问题。
<video src="http://www.huizhangongsi.com/video/acme.mp4" width="320" height="200" controls class="test2"></video>
4、 左右布局(左图片右文字)要记得尽量使用flex布局:
父盒子:
display: flex;
justify-content: space-between;
两个子盒子设置:flex:4...
5、 移动端页面图片,宽高都尽量使用百分比的形式。
6、 多余字体显示不全用:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
7、 设置logo居中
.logo{
width:100%;
height: 120px;
background-color: #000;
position:relative;
}
.logo img{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
8、想让视频播放显示完整使用(需要计算视频的显示的宽高比例):
var vedioWidth = $(".test2").width();
$(".test2").css('height',vedioWidth*178/317.25);
9、页面左右滑动出现滚动条的原因就是:页面的内容撑开了整个屏幕,屏幕宽度不够不能容下那些内容了,所以会出现可以滑动问题,解决办法需要在火狐浏览器上可以查看是哪个元素撑开盒子了,然后重新设置即可。
10.移动端页面会有兼容性问题,做之前需要考虑这个问题书写。
转载于:https://www.cnblogs.com/duanzhange/p/8966279.html
移动端页面构建需注意?相关推荐
- vant 软键盘_移动端页面输入底部被软键盘遮挡问题
概述 近期有个移动端页面的项目,存在需要用户输入的表单信息.因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点 ...
- 移动端页面按手机屏幕分辨率自动缩放的js
1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var phoneHeight = parse ...
- 移动端页面性能优化方案
移动端页面性能优化方案 加载优化 使用首屏加载 按需加载 预加载 压缩图片 减少Cookie 异步加载第三方资源 脚本执行优化 CSS优化 JavaScript执行优化 渲染优化 SEO(搜索引擎优化 ...
- 浅谈移动端页面性能优化方案
众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端.比如淘宝双11,在移动端支付的接近7成.这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑 ...
- 终极WordPress页面构建器:WPBakery
Web开发和设计的价格很高. 对于许多刚起步或处于业务初期阶段的企业家而言,他们将很难找到可以以较低预算建立网站的开发人员和设计师. 幸运的是,WordPress插件开发人员已经看到了对快速且经济高效 ...
- html5--项目实战-仿天猫(移动端页面)
html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占% ...
- app去除html标签,wap、app移动端页面常用html标签汇总
1.section 将内容组织到精确的语义块,表示页面的一部分. 2.article article表示网页的一个文章.故事. 3.header (1)用在整页的页头 (2)section或者arti ...
- wordpress页面_查看#1 WordPress页面构建器
wordpress页面 This article was created in partnership with BAWMedia. Thank you for supporting the part ...
- CSS5:移动端页面(响应式)
CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做 只有一些新闻站 ...
最新文章
- 企业搜索引擎开发之连接器connector(二十七)
- wxWidgets:wxWindowCreateEvent类用法
- 在Tomcat下JSP、Servlet和JavaBean环境的配置
- mysql数据库 quota_shell脚本抓取用户存储quota写道mysql并展现到grafana面板
- 常用电子接口大全,遇到不认识的,就翻出来对照辨认!
- 浅谈流处理算法 (1) – 蓄水池采样
- taro 缺点_Taro小程序富文本解析4种方法
- 深入浅出逻辑组合电路(2)
- windows server 2008 iis6.0 无法下载.exe
- 前端学习(2879):实现v-if和v-show设计分析 视图搭建
- Maven构建分布式项目时子模块相互依赖打包技巧
- 开发老人笔记:Git 常用命令清单
- 结对-五子棋游戏-开发环境搭建过程
- 关于邮件服务器应用系统安全SSL ×××(强身份认证)方案
- 整数实例hdu2041(超级楼梯)
- 领域的初学者--推荐的一本书
- linux sd卡启动盘制作工具,Sd卡启动盘的制作(EXT2)
- 用matlab画阻尼振动包络线,matlab阻尼振动模拟.doc
- 技术小咖之基于SDK的第一个windows图形界面程序
- SVN :找不到这样的主机