相应式开辟精短总结

2024年1月14日 151次阅读 来源: farmerz 
vieport如今还不是w3c的正式规范之一，重要用在挪动端合营@media完成自适应挪动网页设想

最最先的挪动端阅读器在一个比屏幕更宽的假造“窗口”中衬着页面，然后经由过程手指在屏幕的缩放战争移来阅读。
起首引入viewport元标签（<meta name="viewport" content="...">）的是mobile safari苹果挪动阅读器，Safari阅读器明确规定，标签的内容必需为“由逗号分开的列表”。

视口基本

  • width:<px|device-width>

  • initial-scale:<number>

  • maximum-scale:<number>

  • minmum-scale:<number>

  • user-scalable:<true|false>

像素并不是像素

在许多挪动端的阅读器中依据本身的屏幕像素密度会采用肯定的屏幕物理像素跟css像素比的体式格局来显现网页。

如许致使的问题是：

1、由于挪动端现今的屏幕物理像素密度异常高致使一般的页面会成倍放大，带来笔墨和图片失真的状况。
解决方法是：
2、刚最先就针对挪动端设想放大倍数的网页。然后经由过程css减少。

视口宽度及屏幕宽度

如今一般的做法是:

  1. 增加

<meta name='viewport' content="width=device-width, initial-scale=1,user-scalable=false">

  1. 运用@media来举行自适应。

    原文作者：farmerz
    原文地址: https://segmentfault.com/a/1190000008473638
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞