移动端的开发-视口-适配

比较电脑端与手机端的效果

可见，电脑端很大的图，移动上看就很小了

不太好看

再看一次

大图的时候

显示到手机上时，被等比例缩小了

不希望有这样子的效果

设置视口

手机设备会有自己的宽和高

效果

大一点的图，适配一下，让它变小，看效果

例子

开发网页时

美工给图的尺寸

750刚好是iphone六的一倍

前端按照手机的情况先把尺寸按照比例放大的做好

用于手机端的时候，再缩小。页面就清晰不混乱。

不仅仅图片缩放，背景图也需缩放

让背景图适配

如果不适配，图片按原始大小显示，适配后，会缩放

本例中背景图片按照.box盒子的宽高适配，结果

就是图片刚好和盒子尺寸一样大小，完成了适配

适配前

图片太大了

适配后

使用了length适配，参数宽高

也可以使用百分比

background-size: 宽百分比高百分比

auto，背景图真实大小

cover效果

父级整体的盖住图片

contain

让容器可以把图片全部展现出来

小结，移动端有一个视口的概念，还有一个retina屏适配的概念

移动端的开发-视口-适配相关推荐

移动端web开发——视口
本篇主要是记录一下移动端视口的分类说明和其它的一些知识.在开始之前,先看一个典型的例子: <meta name="viewport" content="width= ...
移动端网页开发三（纠结适配的那些年）
前面两篇文章介绍了移动端网页开发所要具备的基础知识. 今天着重来讲解移动端的适配方案. 做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的.而移动端基本是没有兼容问题的,全是css3 ...
轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
（一）移动端前端开发-移动端基础
文章目录一.移动web 二.H5运行环境分类三.移动端屏幕 1. PPI 2. 像素分类 3. 屏幕缩放 4. DPR 四.移动端浏览器及内核分析 1. 移动端浏览器类型 2. 内核五.移动端开 ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
移动端的开发详解与1px边框等注意事项
移动端开发我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站. app:application应用程序. 手机软件:主要指安装在智能手机上的软件, ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
Web前端——移动端页面开发
Web前端笔记第五部分:移动端页面开发 1. 移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大, 宽度可能是980px或者1024px,目的是为了显示 ...

移动端的开发-视口-适配

移动端的开发-视口-适配相关推荐

最新文章

热门文章