首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
移动开发
> 详细
移动开发web第一天
时间:
2018-02-01 10:43:29
阅读:
223
评论:
0
收藏:
0
[点我收藏+]
标签:
解决方案
解决
限制
输入法
流式
name
移动端
按钮
round
一、适配问题解决方案:流式布局 + viewport
1、流式布局
百分比布局,通过设置盒子的宽度为百分比来根据屏幕的大小进行伸缩,特点是不受固定像素的限制,内容向两侧填充
2、viewport
在移动端用来承载网页的这个区域,就是我们的视觉窗口,也叫viewport(视口), 这个区域可设置高度宽度,可按比例放大缩小,而且能设置是否允许用户自行缩放。
<meta name = "viewport">让浏览器知道设置了viewport,viewport只在移动端识别
3、viewport 参数
width:定义viewport的宽度,有一个特殊值 device-width当前设备的宽度
initial-scale:默认的初始缩放比
设置1.0,和PC端页面的显示比例一致,一比一显示在移动端
user-scalable:是否允许用户自行缩放 1-yes,0-no
maximum-scale:最大缩放比
minimum-scale:最小缩放比
4、构建标准的移动端web开发页面
<meta name = "viewport" content = "width = device-width,initial-scale = 1.0, user-scalable = 0">
快捷键—meta:vp
二、在写项目要注意的问题
base样式定义:reset css 重置默认的、浏览器自带的一些样式(所有的标签和伪类),目的是保持各种终端显示一致
1、在移动端特殊的设置
①清楚点击高亮效果
-webkit-tap-highlight-color: transparent;
②设置所有的盒子的宽度以边框开始计算
在移动端通常使用的是百分比布局,那么这样的布局如果使用border或者padding会使容器的宽度超出屏幕的宽度产生滚动条。
-webkit-box-sizing: border-box;
box-sizing: border-box;
③清除input默认的样式
webkit-appearance: none;
2、最小宽度、最大宽度的限制
min-width:300px; //适配小屏幕设备,为了有较好的布局效果。
max-width:640px;//保证页面在尺寸比较大的设备当中保证页面的效果也就是清晰度
3、物理像素和图标模糊度问题
解决方案,采用压缩图标尺寸的方式来解决。
如果是Img使用直接设置宽高的方式来压缩。
如果是背景使用的是设置background-size的方式来压缩
4、搜索按钮调用
在移动端调用输入法,弹出的小键盘enter键会变成搜索按钮
<form action = "#">
<input type = "search" placeholder = "提示" />
</form>
5、结构性伪类原则器---同类型选择器
E:first-of-type匹配同类型中的第一个元素E。
E:last-of-type匹配同类型中的最后一个元素E。
E:nth-of-type(n) 匹配同类型中的第n个元素E。
移动开发web第一天
标签:
解决方案
解决
限制
输入法
流式
name
移动端
按钮
round
原文地址:http://blog.51cto.com/13517854/2067593
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
关闭苹果IOS app自动更新
2021-07-29
开发一个即时通讯App
2021-07-28
iOS 跳转App Store进行评分
2021-07-26
诺基亚短信生成!太好玩了
2021-07-26
【Azure 应用服务】App Service 配置 Application Settings 访问Storage Account得到 could not be resolved: '*.file.core.windows.net'的报错。没有解析成对应中国区 Storage Account地址 *.file.core.chinacloudapi.cn
2021-07-26
Android系统编程入门系列之界面Activity响应丝滑的传统动画
2021-07-26
uniapp h5,app两端复制文本
2021-07-22
uni-app滚动视图容器(scroll-view)之监听上拉事件
2021-07-21
新型横向移动工具原理分析、代码分析、优缺点以及检测方案
2021-07-19
Android系统编程入门系列之界面Activity交互响应
2021-07-19
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!