视频连接

一、视口

视口 viewport 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口，理想视口。

1.1 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面再手机上显示的问题
IOS,Android基本将这个视口分辨率设置为980px,所以PC上的网页大多都能再手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

1.2 视觉视口 visual viewport

用户正在看到网站的区域
我们可以通过缩放去操作视觉视口，但不会影响布局视口。

1.3 理想视口 ideal viewport

对设备来说，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

二、视口标签 meta

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scal=1.0, maximum-scale=1.0, minimum-scale=1.0">

width	宽度设置的是viewport的宽度,可以设置divce-width的特殊值
initial-scale	初始缩放比例，大于0的数字
maximum-scale	最大缩放比例，大于0的数字
minimum-scale	最小缩放比例，大于0的数字
user-scalable	用户是否可以缩放，yes OR no （1/0）

三、二倍图

背景图像缩放

background-size: n n;

只写一个参数的话就等比缩放。n可以是精准单位，也可以是百分比（相对于父盒子）,cover,contain。

    <style>div {width: 500px;height: 500px;border: 2px solid red;background: url(images/dog.jpg) no-repeat;/* background-size: 图片的宽度 图片的高度; *//* background-size: 500px 200px; *//* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 *//* background-size: 500px; *//* 2. 里面的单位可以跟%  相对于父盒子来说的 *//* background-size: 50%; *//* 3. cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全 *//* background-size: cover; *//* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */background-size: contain;}</style>

移动Web笔记——视口/二倍图/多倍图/背景缩放相关推荐

meta视口标签、物理像素与物理像素比、二倍图做法、背景缩放background-size、背景图片2倍图
01-meta视口标签 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
Web笔记（二）Tomcat 使用总结
Tomcat 介绍 Tomcat是由Apache软件基金会下属的Jakarta项目开发的一个Servlet容器,按照Sun Microsystems提供的技术规范,实现了对Servlet和JavaSe ...
深入分析Java Web技术内幕读书笔记（二）浅析DNS域名解析过程
上一篇文章<浅析Web请求过程>讲述的是如何发起HTTP请求,对于请求发起过程中很重要的一个步骤--DNS解析过程的描述是一带而过,本篇文章将跟着DNS解析过程来分析域名是如何解析的. 一 ...
Java web与web gis学习笔记（二）——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
Java Web 实习笔记（二）
Java web实习笔记目录导航 1. Java Web 实习笔记(一) 2.Java Web 实习笔记(二) 3.Java Web 实习笔记(三) 4.Java Web 实习笔记(四) 笔记(一) ...
二倍图（物理像素物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
二倍图物理像素&物理像素比物理像素指的是屏幕显示的最小颗粒,是物理真实存在的,我们开发的1px不一定等于1个物理像素,(PC端相同,移动端不一定相同) PC端和早期手机屏幕是 1CSS像素 ...
黑马pink老师Web前端入门笔记（二）
Web前端入门二.HTML标签 (一) 学习目标 (二)HTML语法规范 (三) HTML基本结构标签 (四) 开发工具 (五) HTML常用标签 1.语义标签: 2.标题标签(重要): 3.段落和 ...
Web笔记之移动端开发
1.移动端基础 ①浏览器现状说明:国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Andr ...
响应式编程笔记（二）：代码编写
2019独角兽企业重金招聘Python工程师标准>>> 响应式编程笔记(二):代码编写博客分类: 架构原文:Notes on Reactive Programming Part ...

移动Web笔记——视口/二倍图/多倍图/背景缩放

一、视口

1.1 布局视口 layout viewport

1.2 视觉视口 visual viewport

1.3 理想视口 ideal viewport

二、视口标签 meta

三、二倍图

背景图像缩放

移动Web笔记——视口/二倍图/多倍图/背景缩放相关推荐

最新文章

热门文章