移动web——基本知识点总结
视口viewport
1、在桌面端的浏览器的宽度有肯能是很大的,如果设置了一个很大的值,那么在移动端中的浏览器显示的时候会有横向移动的拖拽条,为了避免出现这样的横向拖拽条,我们每次都要页面的宽度就是移动设备浏览器的宽度
2、移动设备的浏览器(或App中的webview)好比是相框,viewport就是相框中的画,如果画与相框一样大是不是很完美?
3、快捷键:meta:vp + tab,使用了meta可以将视口调整到与设备大小一样
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
3、参数解释
name:声明属性是viewport属性
content:属性具体设置的值
width:宽度,一般是设备宽度device-width
height:高度,一般不设置让其自动撑大
initial-scale:视口默认的缩放比例 一般默认设置的是1.0
user-scalable:设置是否支持缩放 一般设置的是 no、false、0
maximum-scale:最大的所放值 1.0
minimum-scale:最小的所放值 1.0
移动端样式
1、点击高亮效果:移动端默认点击会附带高亮效果,可以将此效果变成透明
a, button, input, optgroup, select, textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
2、盒子模式:box-sizing设置以边框为主,这样能够保证盒子大小不会因为内容的变化而改变其布局
box-sizing: content-box;
3、input样式:移动端input标签会附带有3d效果,简单的border与outline设置为none无法去除
input {
border: none;
outline: none;
-webkit-appearance: none;
}
4、最小最大宽度:考虑到移动设备在大尺寸的的屏幕不会过度缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题,值不是固定的,根据实际情况调整
max-width: 640px; /*在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px; /*在移动设备当中现在最小的尺寸320px*/
5、结构伪类选择器:E是子元素,意思是相对E这个子元素的父元素下的第几个同类元素
E:first-of-type匹配同类型中的第一个元素E
E:last-of-type匹配同类型中的最后一个元素E
E:nth-of-type(n) 匹配同类型中的第n个元素E
移动web——基本知识点总结的更多相关文章
- Web开发知识点总结
前言:这是一篇简单的web开发知识点的总结,适用于刚开始学习编程的人来学习的.我是为了能够在熟记熟记这些知识点而总结的一篇文章. 1 什么是浏览器? (1) 浏览器就是接收浏览者的操作(打 ...
- web后台知识点整理
五.JEE 适用于创建server端的大型的软件服务系统 1. JEE : JAVA PLATFORM ENTERPRISE DEDITON 2.是一个规范集.技术集.框架集(API集) 一种技 ...
- web小知识点
写在前面: 该篇是个人平时对web前端小知识点的总结,会不定时更新...... 如有错误,敬请批评指正. 正文: 1.WWW是World Wide Web的缩写. 2.HTML(Hyper Text ...
- Web前端知识点记录
一.HTML的加载顺序 浏览器边下载HTML,边解析HTML代码,二者是从上往下同步进行的 先解析<head>中的代码,在<head>中遇到了<script>标签, ...
- HTTP协议web开发知识点
HTTP协议 HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数 ...
- web前端知识点1
1. input属于窗体元素,层级显示比flash.其它元素都高.请判断这句话的正确与否. 错误 层级显示优先级: frameset > 表单元素 > 非表单元素 在html中,帧元素(f ...
- JAVA web 相关知识点
1: web的三个核心标准: URL: http VS https HTTP: 通信协议,客户端/服务器端信息交互方式; 特点是无状态: HTML: 2: HT ...
- web前端知识点反思总结
当别人问你之前的知识,我们便会勾起之前的回忆,然后进行一番痛苦的挣扎后,发现我依然记得你 什么是 DTD ? 文档类型定义 (DTD) 可定义合法的 xml 文档的构建模块 ,他是使用一系列合法的元素 ...
- Java Web Servlet知识点讲解(二)
一.定义Servlet: public class HelloServlet extends HttpServlet { @Override protected void doGet(HttpSer ...
- Java Web Servlet知识点讲解(一)
一.Web应用架构 如图所示: HTTP协议:一个简单的请求一响应协议,通常运行在TCP之上,它指定了客户端可能发送给服务器什么样的信息以及得到什么样的响应. JDBC:Java语言中用来规范客户端程 ...
随机推荐
- 51 nod 1079 中国剩余定理
1079 中国剩余定理 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K % ...
- ms sql SERVER 下载
企业版DVD SQL Server 2005 Enterprise Edition(支持超大型企业) 32 位DVD: ed2k://|file|cs_sql_2005_ent_x86_dvd.iso ...
- bridge 上网
手头有一台机器上有一个虚拟机 虚拟机为桥接 本机为静态IP上网 想让虚拟机上网的方式是 本机不设ip 网卡设置DHCP. 虚拟机设置静态ip
- oracle 12c show con_name
今天安装了一个oracle 12c的数据库做测试,在运行一个很简单的命令时出错了: SQL> show con_name concat "." (hex 2e) SP2: u ...
- 相当精简的CentOS个人桌面版--从CentOS6.3 32b-mini版開始(mini版过程略)
利用网络实现相当精简的CentOS个人桌面版--从CentOS6.3 32位mini版開始(mini版过程略).升级后即是CENTOS6.5. 特别感谢163网易的镜像空间[http://mirror ...
- Android Studio怎样改动快捷键
在Android Studio中.如果你认为某个快捷键太复杂,要想改动.怎么改动呢,首先要找到这个快捷键,可是Android Studio搜索快捷键有一个bug,就是你不能依据快捷键来搜索相应的功能点 ...
- unity3d杂记
由于公司用unity3d开发客户端部分,今天去参加了下unity3d成都开发者大会.在这里简单记录一下会议里关于unity3d的内容. 说到unity3d,第一次知道的时候也是大概3年前的事情.这几年 ...
- 为什么使用 use strict
进入标志: "use script"; 使用方式: 可以在 js 代码的第一行,也可以使用在函数中.但是写在 js 代码第一行不利于文件合并,因此可以写在一个自调用函数的第一行 使 ...
- ios 从rgb array生成UIImage并显示,oc版
; ; const size_t Area = Width * Height; ; // rgba std::vector<uint8_t> output(Area*channles); ...
- 20170623_oracle备份和恢复_常见问题
1 为什么需要备份?备份分类? 1)故障.迁移.误操作 2)备份分类: 物理与逻辑角度:物理备份.逻辑备份 备份策略角度:完全备份.增量备份.差异备份 2 使用导入导出进行备份和恢复及其四种模式:其他 ...