写手机端页面应该注意的地方

2018/04/25 11:04
阅读数 11

像素一个像素就是计算机屏幕所能显示的一种特定颜色的最小区域。

像素分为:设备像素css像素。

视口:是html的父元素,即视口为初始包含块

视口分为:

  •   布局视口(移动端css布局的依据视口)
  •   视觉视口(看到网站的区域)
  •   理想视口(定义理想的布局视口)

在手机上为了容纳为桌面浏览器设计的网站,默认的布局视口宽度远大于屏幕的宽度

<meta name="viewport" contant=" width:device-width" />意为将布局视口的宽度设为理想视口

关于视口:

  1. 在PC端,布局视口就是浏览器窗口
  2. 在M站,视口分为布局视口和视觉视口
  3. M站还有一个理想视口(理想视口的尺寸因设备和浏览器不同而不同,且可以将布局视口的宽度设为理想视口)

设备像素比(DPR)Device Pixel Rati  简称(DPR)

DPR成立的前提是缩放比为1。

DPR=设备像素个数/理想视口css像素个数(device-width).

device-width意为设备屏幕的宽度

<meta>标签

<meta name="viewport" contant="width=device-width,inital-scale=1.0;maximum-scale=1.0;user-scalable=no" />

  • contant里面的内容为一个字符串值
  • width=device-width  意为将布局视口的宽度设为理想视口
  • inital-scale=1.0页面初始缩放比例为1
  • maximum-scale=1.0页面的最大缩放比例为1
  • user-scalable是否允许用户对页面进行修改

 

适用于DPR=2的设备

<meta name="viewport" contant="width=device-width,inital-scale=0.5,maximum-scale=0.5,user-scalable=no">

 

适用于所有设备:

<meta name="viewport" contant="">

<script>

  var scale=1/window.devicePixelRatio;

  document.querySelector('meta[name="viewport"]').setAttribute('contant','width=device-width,inital-scale='+scale+',maximum-scale='+scale+',minmum-scale='+scale+',user-scale=no');

</script>

在适应了所有设备之后遇到了div的宽高不会随着屏幕的大小而变化所以可以在一个JS文件中加上:

document.documentElement.style.fontSize=document.documentElement.clientWidth/10+"px";

不同的设备现在可以等比缩放了,但是有一个缺点:转换尺寸时要除以75需要借助计算器,影响效率,且会出现除不尽的情况,使页面存在偏差。

 

 

方法2:

不修改meta标签

<meta name="viewport" contant="width=device-width,maxmum-scale=1,initial-scal=1,user-scarable=no">

<script>

  document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5 + "px";

</script>

7.5是以rem为单位的页面总宽,是苹果6的宽度,苹果5的话是除以其他的

(思考:觉得这样不好用不同的屏幕难道还要写不同的吗?

 

文字字体不需要换算成rem可用下面的代码

 

 

在屏幕最大是321px时body中默认字体的大小:

@media screen and (max-width:321px){

  body{

    font-size:16px;

    }

}

 

在屏幕大小在321px和400px之间时body中默认字体的大小

@media screen and (min-width:321px)and(max-width:400px){

  body{

    font-size:17px;

    } 

}

在屏幕最大是400px时body中默认字体的大小

@media screen and(min-width:400px){

  body{

    font-size:19px;

    }

}

片段二:

@media screen and (max-width:321px){

  header,footer{

    font-size:16px;

    }

}

@media screen and (min-width:321px)and(max-width:400px){ 

  header,footer{

    font-size:17px;

    }

}

@media screen and(min-width:400px){

  header,footer{

    font-size:19px;

    }

}

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部