初识WEB移动端开发-白红宇

初识WEB移动端开发

阅读量：4992 次

发布时间：2019-06-12

本文共 1401 字，大约阅读时间需要 4 分钟。

一、设置meta标签


     见文知意
     允许全屏模式浏览
     状态条样式
     忽略数字识别为电话号码
     安卓自动禁用，IOS不会自动识别邮件地址

二、使用百分比布局，使用rem单位和mediaQuery

html {
       font-size: 62.5%; /* 10÷16=62.5% */}@media only screen and (min-width: 481px){
       html {        font-size: 94%!important; /* 15.04÷16=94% */    }}@media only screen and (min-width: 561px){
       html {        font-size: 109%!important; /* 17.44÷16=109% */    }}@media only screen and (min-width: 641px){
       html {        font-size: 125%!important; /* 20÷16=125% */    }}

meidaQuery可用直接用在样式表里，也可以用在link标签中；


         // 肖像模式样式      
     #landscape { display: none; }//横屏时使用的样式

为提高页面适应性，可以使用百分比布局、设置box-sizing属性、使用display:table-cell表格布局等方法；常见布局方式：流体布局，固定布局，表格布局，百分比布局，混合布局，弹性布局等。

三、浅谈屏幕

DPI怎么计算呢？DPI也叫PPI。

PPI：PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。

像素：

CSS pixels：浏览器使用的抽象单位，主要用来在网页上绘制内容。

device pixels：显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。

120-160属于低分屏；

160-240属于中分屏；

240-320属于高分屏；

320以上数据超高分屏，也就是传说中的retina屏幕；

开发过程中应该根据dpi设置mediaQuery的比例或者图片，例子：

#header {
     background:url (medium-density-image.png);}@media screen and (- webkit -device-pixel-ratio:1.5) {/* CSS for high-density screens */#header { background:url (high-density-image.png);}}@media screen and (- webkit -device-pixel-ratio:0.75) {/* CSS for low-density screens */#header { background:url (low-density-image.png);}}

转载于:https://www.cnblogs.com/kiscall/p/4742551.html

你可能感兴趣的文章