拜博网站建设,分布式网站开发,建协网官方网站,济南建站服务商任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em16px。那么12px0.75em,10px0.625em。为了简化font-size的换算#xff0c;需要在css中的body选择器中声明Font-size62.5%#xff0c;这就使em值变为 16px*62.5%10px, 这样12px1.2em, 10px1em, 也就是说只需要…任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em16px。那么12px0.75em,10px0.625em。为了简化font-size的换算需要在css中的body选择器中声明Font-size62.5%这就使em值变为 16px*62.5%10px, 这样12px1.2em, 10px1em, 也就是说只需要将你的原来的px数值除以10然后换上em作为单位就行了。
所以我们在写CSS的时候需要注意两点
body选择器中声明Font-size62.5%将你的原来的px数值除以10然后换上em作为单位重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2 1.44的现象。比如说你在#content中声明了字体大小为1.2em那么在声明p的字体大小时就只能是1em而不是1.2em, 因为此em非彼em它因继承#content的字体高而变为了1em12px。
rem是CSS3新增的一个相对单位root em根em这个单位引起了广泛关注。这个单位与em有什么区别呢区别在于使用rem为元素设定字体大小时仍然是相对大小但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元素就成比例地调整所有字体大小又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早版本外所有浏览器均已支持rem。对于不支持它的浏览器应对方法也很简单就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子 p {font-size:14px; font-size:.875rem;}
px 与 rem 的选择 对于只需要适配少部分手机设备且分辨率对页面影响不大的使用px即可 。 对于需要适配各种移动设备使用rem例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
rpx rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。 无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度拿iPhone6来讲屏幕宽度为375px把它分为750rpx后 1rpx 0.5px。 微信小程序同时也支持rem尺寸单位 rem 规定屏幕的宽度为20rem, 所以 1rem (750/20)rpx 37.5 rpx
css中1px并不等于设备的1px 一般分为物理像素和独立像素 css 1px 为独立像素 设备1px为物理像素 devicePixelRatio 物理像素/ 独立像素 如果devicePixelRatio 2 表示 1个独立像素等于2个物理像素 devicePixelRatio不是固定的他会随着屏幕的分辨率改变而改变
一般情况下屏幕的分辨率越大 代表css中的1px的物理像素就越多devicePixelRatio的值也会增大
浏览器默认的viewport叫做 layout viewport 可以通过document.documentElement.clientWidth 来获取
浏览器可视区域的大小visual viewport 可以通过window.innerWidth
适配移动设备的viewportideal viewport 这个移动设备的固定的尺寸
设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport三类其中的 ideal viewport 是最适合移动设备的viewportideal viewport的宽度等于移动设备的屏幕宽度只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)那么这个元素的宽度就是设备屏幕的宽度了也就是宽度为100%的效果。ideal viewport 的意义在于无论在何种分辨率的屏幕下那些针对ideal viewport 而设计的网站不需要用户手动缩放也不需要出现横向滚动条都可以完美的呈现给用户。
利用meta标签对viewprot进行控制
通常用到的mate标签
