移动前端开发入门(一)

  响应式布局定义:将弹性网格布局、弹性图片、媒体和媒体查询整合起来,即为响应式布局。

  一、媒体查询:支持不同的窗口

  基本语法:

@media screen and    (max-width:960px){
    body{
         background-color:red;
     }
}

  使用@inport指令可以在当前样式表中按条件引入其他样式表。如下例:

@inport url("phone.css") screen and (max-width:768px);

  但是需要注意的是使用@inport方式会增加HTTP请求

  媒体查询能够检测的性能有:

  width:视口宽度

  height:视口高度

  device-width:设备屏幕宽度

  device-height:设备屏幕高度

  orientation:检测设备处于横向还是纵向

  aspect-ratio:基于视口宽高比,一个16:9显示的屏可这样定义,aspect-ratio:16/9

  device-aspect-ratio:基于设备屏幕宽高比

  color:颜色位数,min-color:16,会检测设备是否拥有16位颜色

  color-index:设备颜色索引表中的颜色数,必须为非负整数

  monochrome:检测单色帧缓冲区中每像素使用位数,必须非负整数

  resolution:检测屏幕或打印机分辨率

  scan:电视机的扫描方式,值可为,progresssive(逐行扫描),interlace(隔行扫描)

  grid:检测输出设备是网络设备还是位图设备

  注:上述特性,除scan和grid外,可用min和max创建查询范围。

  二、使用流式布局

  目标元素宽度 / 上下文元素宽度 = 百分比宽度

  在响应式布局中,要放弃使用px,使用em。

  IE无法调整使用px作为单位的字体的大小。

  em的特点:

  1、em的值并不是固定的。

  2、em会继承父级元素的字体大小。

  rem,也是相对单位:

  是相对于HTML的根元素,而不是父元素。

  弹性图片:

  可以给图片都加上属性,即为图片设置阈值:

     img{max-width:100%;}   或   img{max-width:220px;}

  max-width属性:

  可以给元素加上max-width属性,以限制该元素的最大宽度。

  viewport特性,是一个移动专属的Meta值,用于定义视口的各种行为。

   layout viewport:布局视口

  在iOS Safari中定义了一个viewport meta标签,用来创建一个虚拟的布局视口,这个视口的分辨率接近PC。

    visual viewport:视觉视口

  手持设备物理屏幕的可视区域,即视觉视口。

     ideal viewport:完美视口

  完美视口。不用缩放或拖动网页就能很好的进行网页浏览。

      viewport特性: 

     width:

  width被用来定义layout viewport的宽度,如果不指定该属性(或者移除viewport meta标签),则layout viewport宽度为厂商默认值。

<meta name="viewport" content="width=device-width" />

  此时的layout viewport将成为ideal viewport,因为layout viewport宽度与设备视觉视口宽度一致了。

    height:

  与width类似,但实际上却不常用,因为没有太多的use case。

      initial-scale:

  如果想页面默认以某个比例放大或者缩小然后呈现给用户,那么可以通过定义initial-scale来完成。

  initial-scale用于指定页面的初始缩放比例,假定你这样定义:

<meta name="viewport" content="initial-scale=2" />

  那么用户将会看到2倍大小的页面内容。

 <meta name="viewport" content="initial-scale=1" />

  如上initial-scale也能实现ideal viewport。

      maximum-scale:

  在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。

  maximum-scale用于指定用户能够放大的比例。

<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

  假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的5倍。

     minimum-scale:

  类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。

    user-scalable:

  如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

  该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no。

  使用方法如下:

<meta name="viewport" content="user-scalable=no" />
时间: 2024-10-06 18:47:36

移动前端开发入门(一)的相关文章

前端开发入门学习笔记(一)

HTML:超文本标记语言. html:是一个基础结构. CSS:就是跟网页做装修的,修饰HTML的基础内容:样式. JavaScript:一个网页的行为,动作,动态的东西. html标准文件格式:<!DOCTYPE html><html><head><meta charset="UTF-8"/><title>标题</title></head><!--我是头部 周围包括的符号为注释--><

前端开发入门到实战:HTML5新增和废弃的标签

一.废弃的标签 以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了. 1.能用CSS代替的元素 这些元素包含basefont.big.center.font.s.strike.tt.u.这些元素纯粹是为页面展示用的,表现的内容应该由CSS完成. 2.frame框架 这些元素包含frameset.frame.noframes.HTML5中不支持frame框架,只支

前端开发入门到实战:css实现div垂直水平居中的2种常用方法

方法一: 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align:middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子): <html> <head> <title>导航条</title&g

前端开发入门到实战:把HTML转成PDF的4个方案及实现

在本文中,我将展示如何使用 Node.js.Puppeteer.headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档. 背景:几个月前,一个客户要求我们开发一个功能,用户可以得到 PDF 格式的 React 页面内容.该页面基本上是患者病例的报告和数据可视化结果,其中包含许多 SVG.另外还有一些特殊的请求来操纵布局,并对 HTML 元素进行一些重新排列.因此与原始的 React 页面相比,PDF 中应该有不同的样式和额外的内容. 由于这个任务比用简

web前端开发入门HTML5知识点

1.首先我们先了解一下什么是前端,简单说,就是我们平常所浏览的网页啊,以及app首页和小程序. 2.我们经常访问浏览器的时候,经常会输入网址,又可称为域名http://www...com.有时候是http有时候又是https,二者的区别在于后者更加安全些,有秘钥.www就是万维网,后缀com.org.edu.cn以及DNS称为域名. 3.web开发设计的基础之一是html.html基本框架有以下几部分组成:结构<html><!DOCTYPE html> .//声明网页类型 lang

移动/手机前端开发入门总结

1.首先是meta标签 1 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 2 <meta content="yes" name="apple-mobile-web-app-capable"> 3 <meta content=&quo

移动端开发——前端开发入门

一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小.移动设备上的viewport分为layout viewport . visual viewport 和 ideal viewport 三类,其中的 ideal viewport 是最适

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异. ?那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景:如: input:-webkit-autofill { -webkit-box-shadow: 0 0

前端开发入门到实战:CSS中字体单位:px、em、rem和%

对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手. "网页"和"印刷"的单位若要把单位做区隔,最简单可以分为"网页"和"印刷"两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行设计. 网页

前端开发入门到实战:css 浮动布局,清除浮动

浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一起,超出父级宽度就换行 (4)浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) (5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,开成文字绕图的效果 (6)父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开