像素

像素定义

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
分辨率: 1920 x 1080说的就是屏幕中小点的数量

像素分类

在前端开发中像素要分成两种情况讨论: CSS像素和物理像素

物理像素，上述所说的小点点就属于物理像素
CSS像素，编写网页时，我们所用像素都是css像素
- 浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现
- 一个css像素最终由几个物理像素显示,由浏览器决定;
- 默认情况下在pc端，一个css像素=一个物理像素

视口（viewport)

视口就是屏幕中用来显示网页的区域，即在窗口中显示的网页像素大小。
——视口的大小就是当前窗口所显示的CSS像素大小，会随着网页的缩放而改变大小。

视口大小的查看，视口的宽度即html的宽度，查看html 的宽度即可

可以通过查看视口的大小,来观察css像素和物理像素的比值
- 默认情况下:
  视口宽度1920px (CSS像素)，1920px（物理像素)，即一个css像素=一个物理像素，css像素：物理像素 = 1：1
  （注意，为了好看，win10默认是 css像素：物理像素 = 1：1.5）
- 放大两倍
  放大网页就相当于视口变小
  视口宽度960px (CSS像素)，1920px（物理像素)
  此时，css像素：物理像素 = 1：2 （指的是长或宽，面积就是1：4了）
- 我们可以通过改变视口的大小，来改变css像素和物理像素的比

css像素 / 物理像素 = 1正常显示
css像素 / 物理像素 < 1 放大显示
css像素 / 物理像素 > 1 缩小显示

手机像素

移动端的物理像素

在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰。——说的是物理像素
eg：（物理像素）
电脑像素：24寸 - 1920x1080
手机i6像素：4.7寸 - 750 x 1334
智能手机的像素点远远小于计算机的像素点。

屏幕尺寸大全：
https://www.shejidaren.com/examples/tools/device-metrics/index.html

移动端的视口——css像素

默认情况下，移动端的网页都会将视口设置为980像素（css像素)，以确保pc端网页可以在移动端正常访问。

注意查看移动端像素的时候不要设置 <meta name="viewport" content="width=device-width, initial-scale=1.0">

网页元素在移动端的显示：

网页的宽度小于了980px，正常显示
如果网页的宽度超过了980px,移动端的浏览器会自动对网页缩放以完整显示网页，但是就会显示的非常小。
所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页。

移动端网页的实现

调整像素比

移动端默认的视口大小是980px(css像素)，移动端宽度使759px（物理像素）
所以，默认情况下，移动端的像素比就是视口大小/移动端宽度 (988/750)
满足： css像素 / 物理像素 > 1 缩小显示
所以如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小。

编写移动页面时，必须要对像素比进行调整：
- 调整方案，设置合适的像素比
  eg：
  1css像素对应2个物理像素
  1css像素对应3个物理像素
  即，使css像素 / 物理像素<1
- 进行调整
  利用公式：css像素 / 物理像素，物理像素我们无法改变，所以要将css像素（视口大小）调小。
  调整视口
  可以通过meta标签来设置视口大小
  eg：将视口调成100px： <meta name="viewport" content="width=100px">
  调整之后，就实现了放大效果：
最佳像素比
每一款移动设备设计时，都会有一个最佳的像素比,
一般我们只需要将像素比设置为该值即可得到一个最佳效果

可以在屏幕尺寸大全中查看：https://www.shejidaren.com/examples/tools/device-metrics/index.html

但是不同的设备像素比是不一样的，所以可以直接使用如下meta进行适配

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

也可以加上initial-scale=1.0，初始化时口是1倍，含义和 content="width=device-width是一样的，所以meta可以写成这样，设置成完美视口

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

像素、移动端网页——CSS相关推荐

CSS - 禁止手机移动端网页缩放（meta）
前言您一定不希望手机网页被缩放,本文将提供给您简易的解决方案. 解决方案注意:该方法并不能 "完全" 控制(浏览器有自己的缩放)其缩放,如果想要完全控制则需要使用 JS 加码了 ...
二、5移动端网页适配
移动端网页适配文章目录移动端网页适配屏幕尺寸 PC分辨率视口 rem rem单位尺寸媒体查询 flexible.js 长度单位:vw/vh 屏幕尺寸屏幕对角线的长度,一般用英寸来度量 PC ...
移动端网页的基础制作
移动端不同于pc端,移动端的设备众多,不能将长宽高写为固定的宽高,那样的话在不同长宽高比的移动设备上就会显示差距较大,在移动端网页布局的显示不能追求完全的一致,只能是差距不大即可,这是有移动设备的种类 ...
PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储
目录 PC 端网页特效元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜元素可视 ...
web端网页端分享功能的实现
思路 web端网页端分享功能的实现. 我们看微信的分享开发者文档,可以知道使用微信JS-SDK可以实现网页在微信里的分享. 微信JS-SDK说明文档也就是说在微信浏览器中打开的网页才能调用该 ...
【移动端网页布局】移动端网页布局基础概念 ⑤ ( 视网膜屏技术 | 二倍图概念 | 代码示例 )
文章目录一.视网膜屏技术二.二倍图概念三.代码示例一.视网膜屏技术 PC 端和早期的移动端网页中 , CSS 中配置的 1 像素对应的就是物理屏幕中的 1 像素 ; Retina 视 ...
JavaScript—— PC 端网页特效
目录一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别案例:获取鼠标在盒子内的坐标案例:模拟框拖拽 html cs ...
移动端网页开发三（纠结适配的那些年）
前面两篇文章介绍了移动端网页开发所要具备的基础知识. 今天着重来讲解移动端的适配方案. 做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的.而移动端基本是没有兼容问题的,全是css3 ...
移动端网页布局中需要注意事项以及解决方法总结
移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉 <meta name=&qu ...

像素、移动端网页——CSS

文章目录

像素