响应式开发精短总结

2024年4月13日 88次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞