mobile website development tutorial

2022.03.24

(mobile website development tutorial)Through the previous course,We have already learnedHTMLmiddlepcEnd related operation,Next we will learn to movewapEnd knowledge,pcandWAPThe end is different from those?Let's do it againwapWhat should be adjusted in the end page??


1.webEnd viewport is divided into three


1)Layout


Refers to the width of the web page,Generally, the mobile browser is set by default the width of the layout viewport.

(mobile website development tutorial)

mobile website development tutorial


2)Visual viewport

Refers to the area where the user is seeing the website,Regional width=The width of the browser window of the mobile device

(mobile website development tutorial)

mobile website development tutorial

(mobile website development tutorial)

3)Ideal

The size of the viewport of the layout is the same as the screen width。On the web page<head>Increase the above sentence,Can automatically adapt to the width of the mobile phone screen:


mobile website development tutorial

mobile website development tutorial


2.Twice


When the device pixels are larger than,The picture will be enlarged,And the general will make the picture look blurry。to this end,We can use the two-fold way to improve the clarity of the picture.。


In actual development,As a50 ×50Pixel(CSSPixel)Picture directlyiPhone 6/7/8When displayed in the device,The picture will be enlarged,Twice(iPhone 6/7/8The device pixel ratio is2),which is100 ×100。In order to avoid pictures, it is blurred.,We can make a pre-made one100 ×100picture of,Then manually set the style of this picture in the web page,Set the width and high of the picture to50Pixel。so,This picture will use its original pixel(100 ×100)Show,Guaranteed the original definition of the picture。

返回列表
更多新闻资讯