css视口、多倍图

本文介绍了移动端网页的视口概念,包括布局视口、视觉视口和理想视口,重点讲解了理想视口的重要性,即确保页面在不同设备上具有良好的浏览体验。通过设置meta视口标签,可以将布局视口宽度与理想视口匹配,实现设备宽度与布局宽度一致。同时,提到了物理像素和设备像素比的概念,并强调了禁止用户缩放和设置固定缩放比例在优化移动端布局中的作用。
摘要由CSDN通过智能技术生成

 

2.3理想视口ideal viewport


为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口,对设备来讲,是最理想的视口尺寸
需要手动添写  meta 视口标签通知浏览器操作

meta  视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽

2.4总结


●视口就是浏览器 显示页面内容的屏幕区域
●视口分为布局视口、视觉视口和理想视口
●我们移动端布局想要的是理想视口就是手机屏幕有多宽 ,我们的布局视口就有多宽
●想要理想视口 ,我们需要给我们的移动端页面添加meta视口标签

 标准的viewport设置


●视口宽度和设备保持一致
●视口的默认缩放比例1.0
●不允许用户自行缩放
●最大允许的缩放比例1.0
●最小允许的缩放比例1.0

 

物理像素就是我们说的分辨率

iPhone8的物理像素是750 

在iPhone8里面        1px开发像素=2个物理像素   //   物理像素比

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值