Hello everyone, I am the 12th student of the Wuhan Branch of the IT Cultivation Institute, an honest and kind web programmer.
Today, I will share with you the knowledge points that may be used in CSS2 tasks on the official website of the Cultivation Institute:
Are mobile phone resolutions and px in web pages the same thing?
1. Background Introduction
First of all, what is viewport.
In layman's terms, a viewport on a mobile device is an area of the device's screen that can be used to display our web page.
To be more specific, it is the part of the browser used to display the web page, but the viewport is not limited to the size of the browser's visible area. It may be larger than the browser's visible area, or it may be larger than the browser's visible area. The viewing area is smaller.
2. Knowledge analysis
a. Default viewport of mobile devices:
In order to display those traditional websites designed for desktop browsers on mobile devices, browsers on mobile devices will set their default viewport to 980px or 1024px (also May be other values, this is determined by the device itself)css for the px
b.css, the resolution of the mobile device, and the 'pixel' in the UI portIn desktop browsers: 1px (below we read 'css pixel') represents 1 physical pixel, that is, 1css pixel = 1 physical pixel. When the meta viewport tag is not added: the width of the mobile viewport is 980px or 1024px, at this time, 1css pixel is not sure how many physical pixels (depending on the resolution) rate) towrite a 20px text to see the effect (see demo)after adding the meta viewport tag? We introduce another unit: density independent pixel dp/dipdp/dip is a unit of the same size displayed on different devices (see demo).simple to understand, when using <xmp><meta name="viewport" content="width =device-width, initial-scale=1"></xmp>
设备的独立像素都是可以查到的
移动设备的分辨率：
说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)
dpi/ppi是表示一个每inch多少个物理像素dot的单位
在最开始是160dpi/ppi
后来因为技术的提高，为了追求高清屏幕，有了320dpi/ppi以上等等的屏幕
下面继续说移动设备分辨率
我们可以理解分辨率就是长宽分别有多少个物理像素dot
但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高（见演示）
UI口中的‘像素’
UI图中的像素，也就是psd中我们量出来的像素，比如说任务中psd图的宽度为750px或者640px（见演示）
UI口中的像素是移动设备分辨率
3.常见问题
UI图拿到之后，宽度是750px或者640px怎么办？
4.解决方案
不负责任的说法：除以2写到css里
更不负责任的说法：使用js动态控制viewport，这个这次就不讲了，自己查
5.编码实战
6.扩展思考
1.如何使用js动态控制viewport
2.如何理解其他vw、vh等单位
更多讨论
Q1: ng-model什么时候可以不用？
A1: ng-model在需要双向绑定时候使用
Q2: ng-if会产生ng-model绑定得不到数据怎么办？
A2: 在ng-model的表达式前添加$parent.来获取父级作用域
Q3: ng-options会有一个空置怎么解决？
A3: 为ng-model添加初始值
PPT：https://it-xzy.github.io/WEB-NEW/1048-css-2.html#/
腾讯视频：https://v.qq.com/x/page/u06362q88b3.html?
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；
所有task均是从真实项目中提炼出来的技能点，
强调实战演练+自学优先+师兄辅导的学习方式，
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！