初识移动端

最新推荐文章于 2024-05-14 16:27:26 发布

糕手z

最新推荐文章于 2024-05-14 16:27:26 发布

阅读量210

点赞数 1

文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/weixin_49455047/article/details/121578830

版权

2.1布局视口 layout viewport

2.2视觉视口 visual viewport

2.3理想视口 ideal viewport

3.3背景缩放background-size

5.2CSS初始化 normalize.css

5.3CSS3盒子模型 box-sizing

5.4特殊样式

6.移动端常见布局

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。

1.私有前缀

-moz-：代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表safari、chrome私有属性
-o-：代表Opera私有属性

2.提倡写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

1.浏览器基础

1.1浏览器现状

国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发一样。

总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。

1.2手机屏幕现状

移动端设备屏幕尺寸非常多,碎片化严重
Android设备有多种分辨率:480800,480854,540960,7201280,1080*1920等还有传说中的2K,4K屏
近年来IPhone的碎片化也加剧了,其设备主要分辨率有:640960,6401136,7501334,12422028等
作为开发者无需关注这些分辨率,我们常用的尺寸单位是px

1.3常见移动端屏幕尺寸

1.4移动端调试

chrome DevTools 的模拟手机调试
搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
使用外网服务器,直接IP或域名访问

chrome模拟调试:

(此为布局视口)

2.视口

视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分为布局视口\视觉视口和理想视口

2.1布局视口 layout viewport

一般移动端的浏览器都默认设置了一个布局视口,用以解决早期PC端网页在手机上显示的问题
IOS Android基本都将这个视口分辨率设为980px,使用PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认通过手动缩放网页

2.2视觉视口 visual viewport

字面意思,他是用户正看到的网站的区域.注意:是网站的区域
我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来宽度

2.3理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口,对设备来讲,是最理想的视口尺寸
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就有多宽

2.4meta视口标签

<meta name="viewport" 
content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

width=device-width:宽度等于设备宽度

2.5标准的viewport设置

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

3.二倍图

3.1物理像素&物理像素比

物理像素是指屏幕中显示的最小颗粒,是物理中真实存在的.这是厂商在出厂时就设置好的,比如苹果6是75*1334
我们开发时候的1px不是一定等于1个物理像素
PC端页面,1px等于1个物理像素,但是移动端就不尽相同
一个px的能显示的物理像素点的个数,称之为物理像素比或屏幕像素比

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>

<body>
    <div></div>
</body>

pc端实现效果:

移动端实现效果:

PC端和早前的手机屏幕/普通手机屏幕:1css像素=1物理像素的
Retina(视网膜屏幕)是一种显示技术,可以将更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度

3.2多倍图

对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会照成图片模糊
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题
通常使用二倍图,因为IPhone6/7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求
背景图片注意缩放问题

    <style>
      /* 我们需要一个50*50像素（css像素）的图片 直接放到我们的IPhone8里面会变大2倍 100*100 */
      /* 我们采取的是 放一个100*100图片 然后手动把这个图片缩小为50*50（css像素） */
      /* 我们准备的图片 比我们实际需要的大小 大两倍 这种方式就是两倍图 */
      img:nth-child(2) {
        width: 50px;
        height: 50px;
      }
    </style>

  <body>
    <!-- 模糊的 -->
    <img src="../images/apple50(1).jpg" alt="" />
    <!-- 我们采取二倍图 -->
    <img src="../images/apple100.jpg" alt="" />
  </body>

3.3背景缩放background-size

background-size属性规定背景图片的尺寸

background-size:背景图片宽度背景图片高度;

单位:长度|百分比|cover|contain;
cover把背景图片扩展至足够大,以使背景图片完全覆盖背景区域
contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

background-size: cover:完全覆盖背景区域

background-size:contain:适应内容区域

    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(../images/kk.jpg) no-repeat;
            /* background-size: 图片的宽度 图片的高度; */
            /* background-size: 500px 500px; */
            /* 只写一个参数 肯定是宽度 高度省略了 会等比例缩放 */
            /* 里面的参数可以跟%，相对于父盒子来说 */
            /* background-size: 50%; */
            /* cover 等比例拉伸要完全覆盖div盒子，可能有部分背景图片显示不全 */
            /* background-size: cover; */
            /* contain  高度和宽度等比例拉伸 当宽度 或者高度 布满div盒子就不再进行拉伸，可能会有空白区域*/
            background-size: contain;
        }
    </style>

<body>
    <div></div>
</body>

3.4多倍图切图cutterman

4.移动端开发选择

4.1移动端主流方案

4.2单独移动端页面（主流）

通常情况下，网址域名前面加m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

4.3响应式兼容PC移动端

三星电子官网：www.samsung.com/cn/，通过判断屏幕宽度来改变样式，以适应不同终端

缺点：制作麻烦，需要花很大精力去调兼容性问题

5.移动端技术解决方案

5.1移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题

我们可以放心使用H5标签和CSS3样式

同时我们浏览器的私有前缀我们只需要考虑加webkit即可

5.2CSS初始化 normalize.css

移动端css初始化推荐使用normalize.css/

normalize.css：保护了有价值的默认值
normalize.css：修复了浏览器的bug
normalize.css：是模块化的
normalize.css：拥有详细的文档

官网地址：http://necolas.github.io/normalize.css/

5.3CSS3盒子模型 box-sizing

传统模式宽度计算：盒子宽度=css中设置的width+border+padding
css3盒子模型：盒子宽度=css中设置的宽度widt里面包含了border和padding也就是说，我们的css3中的盒子模型，padding和border不会撑大盒子了

/*css3盒子模型*/
box-sizing:border-box;
/*传统盒子模型*/
box-sizing: content-box;

传统orCSS3盒子模型？

移动端可以全部CSS3盒子模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容，我们就选择CSS3盒子模型

5.4特殊样式

/*css3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除  设置transparent 完成透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁止长按页面时的弹出菜单*/
img,a {-webkit-touch-callout: none;}

    <style>
      /*css3盒子模型*/
      /* box-sizing: border-box;
      -webkit-box-sizing: border-box; */
      /*点击高亮我们需要清除清除  设置transparent 完成透明*/
      a {
        -webkit-tap-highlight-color: transparent;
      }
      /*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
      input {
        -webkit-appearance: none;
      }
      /*禁止长按页面时的弹出菜单*/
      img,
      a {
        -webkit-touch-callout: none;
      }
    </style>

  <body>
    <a href="">xxx</a>
    <input type="button" value="dxxx" />
  </body>

6.移动端常见布局

移动端技术选型

移动端布局和以前学习的PC端有所区别：

糕手z

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识移动端

1.浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。1.私有前缀 -moz-：代表firefox浏览器私有属性 -ms-：代表ie浏览器私有属性 -webkit-：代表safari、chrome私有属性 -o-：代表Opera私有属性 2.提倡写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-rad
复制链接

扫一扫