视口 | 易学教程

一篇真正教会你开发移动端页面的文章(二)

阅读更多关于一篇真正教会你开发移动端页面的文章(二)

移动端开发的干货篇之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件：移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据，比如拿到一张PSD设计图，它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解，其它设计图尺寸道理是一样的，这并不影响我们的开发。首先我们要有一张设计图才行，看下图，假设我们有一张设计图，它很简单，只有一个红色的方块：拿到了设计图，于是你开开心心的开始写代码了，你打开了编辑器，并写下了如下HTML代码： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body>

Web前端基础学习-3

阅读更多关于 Web前端基础学习-3

bfc（block formatting context）块级格式化上下文生成bfc的方式： 1、根元素； 2、float属性不为none（脱离文档流）； 3、position为absolute或者fixed的时候； 4、display为inline-block、table-cell、table-caption、flex、inline-flex； 5、overflow不为visible（默认）。渲染的流程：文档解析成对象模型（dom），通过选择器给对应的元素加上样式，根据渲染规则到显存区域，渲染过程中用到的数据通过上下文来获取。 bfc：渲染时用于保存临时数据和获取外部数据的容器。 HTML和body都是bfc。 bfc的应用：自适应两栏布局；清除内部浮动；防止垂直margin塌陷； ....... 响应式布局：三要素：弹性图片、媒体查询、弹性布局响应式布局开发概念：移动端优先和PC端优先根据当前项目的用户比例进行设计，项目的主要用户为移动端用户时采用移动端优先布局，否则采用PC端优先布局。视口：布局视口：网页在移动端中渲染出的区域，用来加载网页；可视视口：浏览器的窗口；理想视口：由乔布斯提出，当布局视口大小与可视视口大小相同的时候就是理想视口。 css伪元素伪元素根据字面理解就是伪装成元素，但是伪元素并不是元素，而是于生成的内容相关联

html, body 背景

阅读更多关于 html, body 背景

画布特点：1.最小宽度为视口宽度 2.最小高度为视口高度 HTML元素背景覆盖画布 body 背景元素如果HTML元素有背景，BODY元素正常显示（背景覆盖边框盒）如果HTML元素没有背景，BODY元素的背景覆盖画布画布背景图（body） 1. 背景图的宽度百分比，相对于视口 2. 背景图的高度百分比，相对于网页高度3. 背景图的横向位置百分比，预设值，都是相对于视口的4. 背景图的纵向位置百分比，预设值，相对有网页的高度来源： https://www.cnblogs.com/tujw/p/11435344.html

CloudCompare视频录制详解

阅读更多关于 CloudCompare视频录制详解

CloudCompare is a 3D point cloud and mesh processing software , Open Source Project 这款开源软件的功能很强大，被很多人用来做点云的显示和处理，现在就CloudCompare（以下简称cc）的视频录制功能进行详细的操作说明。在cc操作界面的Plugins菜单下拉子菜单中有一个qAnimationPlugin，这个功能就是用来进行视频录制的；如果直接点击qAnimationPlugi，会出现下面的弹出框这是因为，还没有添加视口；下一步就是如何添加视口：调整数据的颜色使得数据的显示效果达到预期， 2.通过旋转平移等操作，找到适合的录频位置，看个栗子，一个完美的视口， 3.保存当前的视口，主菜单里面的Display的下拉菜单有一个Save viewport as object，点击该功能或者通过快捷键ctrl+v 4.不断调整视口的位置，并重复2、3两步的操作，得到所有的视口； 5.选中所有的视口， 6. 7.设置部分参数，注意两点，帧率越大视频越流畅，比特率越大视频质量越高； 8.设置好参数之后，点击render，等待视频录制结束； Tips：第一，对于视口的调整有个小窍门，就是通过不断改变旋转中心来控制局部范围内的调整；第二，两个视口之间的过渡不要太大，不然容易出现噪点；第三

Qt--基础图形绘制

阅读更多关于 Qt--基础图形绘制

一.基础图形绘制 A.Qt图形系统中的关键角色 QPainter --Qt中的画家，能够绘制各种基础图形，拥有绘图所需的画笔、画刷、字体 QPaintDevice --Qt中的画布，画家的绘图板，所有的QWidget类都继承自QPaintDevice Qt图形系统中的关键角色 Qt中所使用的工具 1. QPen -用于绘制几何图形的边缘，由颜色、宽度、线风格等参数组成 2. QBrush -用于填充几何图形的调色板，由颜色和填充风格组成 3. QFont -用于文本绘制，由字体属性组成需要注意的是--只能在QWidget::paintEvent中绘制图形 B.Qt图形系统中的坐标系 1.物理坐标系--原点(0,0)在左上角的位置，单位是像素并且X坐标向右增长，Y坐标向下增长 2.逻辑坐标系--数学模型中的抽象坐标系，单位由具体问题决定，坐标轴的增长方向由具体问题决定我们需要注意的是QPainter使用逻辑坐标系绘制图形，逻辑坐标系中图形的大小和位置经由转换后绘制于具体设备，且在默认情况下的逻辑坐标与物理坐标系完全一致 C.视口与窗口 1.视口--物理坐标系中一个任意指定的矩形 2.窗口--逻辑坐标系下对应到物理坐标系中的相同矩形深入理解视口与窗口 1.视口与窗口是不同坐标系中的同一个矩形 2.视口与窗口中的坐标点存在一一映射的关系 3.视口与窗口能够通过坐标转换而相互转换

移动端页面开发流程

阅读更多关于移动端页面开发流程

移动端页面布局一、移动端app分类 1、Native App原生app手机应用程序　　使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C 2、Hybrid App 混合型app手机应用程序　　混合使用原生的程序和html5页面开发的手机应用 3、Web App 基于Web的app手机应用程序　　完全使用html5页面加前端js框架开发的手机应用二、Viewport视口　　视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。　　在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。参数说明： width：宽度设置的是viewport宽度，可以设置device-width特殊值initial-scale：初始缩放比，大于0的数字maximum-scale：最大缩放比minimum-scale

CSS3自适应布局单位 —— vw,vh

阅读更多关于 CSS3自适应布局单位 —— vw,vh

1. 什么是视口？在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 2. 视口单位vw，vh 视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layout Viewport。根据CSS3规范，视口单位主要包括以下4个： 1. vw：1vw等于视口宽度的1%。 2. vh：1vh等于视口高度的1%。 3. vmin：选取vw和vh中最小的那个。 4. vmax：选取vw和vh中最大的那个。 vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 3. calc()的使用 calc(expression) 是css3的一个新增的功能，用来指定元素的长度。 calc()能给border、margin、pading、font-size和width等属性设置动态值，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)” calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“*” 和

移动端移动布局

阅读更多关于移动端移动布局

移动布局 1.移动设备有手机和ipad 安卓系统 ios系统安卓系统的内置浏览器是谷歌 ios内置 safari浏览器他们的内核都是web，不考虑兼容性，需要考虑的问题是安卓和ios的区别？ 2.布局(写页面) 要考虑以下几点设置的宽度设备的实际大小（设备的分辨率）厂家给的页面的大小设计稿上的大小浏览器的视口（大小）浏览器自带的可以通过用 document.documentElement.clientWidth 查看，在移动设备上如果不做视口处理默认是 980 例子：设备宽是320 页面宽是1200 浏览器视口是980px，三者不统一，我们用移动设备看页面，浏览器视口会自动缩放，以100%完整的展示页面，就会变得不清楚，特别挤。第一我们需要把这个三个变得统一 1.移动设备宽(320) 要和浏览器视口宽一致在head之间加一个meta标签 name=‘viewport’ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 设备宽度和浏览器视口一致时，如果页面大于这个数字，就会出现滚动条 2.当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉

HTML5 移动端视口的相关问题

阅读更多关于 HTML5 移动端视口的相关问题

屏幕尺寸、屏幕分辨率、屏幕像素密度屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。屏幕分辨率：（iphone6 750*1334）指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1920*1080。（这里的1像素指的是物理设备的1个像素点）屏幕像素密度/像素密度/屏幕密度：屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关相同点：1.设备厂商规定的 2.固定的物理像素,CSS像素设备像素/物理像素：（分辨率）买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度. 设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。任何设备的物理像素的数量都是固定的 CSS像素： CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。它是为web开发者创造的，在css或者javascript中使用的一个抽象的层一般情况下，CSS像素被称为与设备无关的像素

移动WEB开发笔记

阅读更多关于移动WEB开发笔记

vertical-align: middle;设置图片居中移动WEB开发视口viewport（显示网页的屏幕区域）布局视口 layout viewport 字太小，手动缩放网页视觉视口 visual viewport 左右滑动看理想视口 ideal viewport 理想视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 物理像素 /物理像素比（DPR）物理像素：屏幕显示的最小颗粒屏幕分辨率物理像素比：1px能显示的物理像素点的个数背景缩放background-size background-size：宽度高度； background-size：宽度；高度等比缩放 background-size：百分比；相对父盒子来说 background-size：contain；一个边顶满盒子，就不在缩放，可能留白/等比缩放 background-size：cover；两个边全部顶满，完全覆盖盒子，可能显示不全/等比缩放 css3移动端盒子模型 box-sizing: border-box; padding 和border不会撑开盒子清除高亮： tap

订阅视口