Java复习打卡day45

weixin_51630304

于 2021-05-22 17:44:46 发布

阅读量77

点赞数

文章标签：移动端布局

本文链接：https://blog.csdn.net/weixin_51630304/article/details/117167295

版权

Java复习打卡day45

移动端现状
视口（viewport）
二倍图
移动端的常见布局

移动端现状

移动端现状
    ·了解当前浏览器内核和屏幕分辨率的问题
内核
    ·国内主流浏览器内核Webkit
屏幕分辨率
    ·手机分辨率：碎片化太多
    ·Android：480x800,480x854,540x960,720x1280,1080x1920等
    ·iphone：640x960,640x1136,750x1334,1242x2208等
    ·2K：手机分辨率
谷歌浏览器
    ·是开发过程的主要模拟手段；
    ·步骤：
        1.右键检查；
        2.选择手机模式；
        3.选择手机类型和尺寸；调节适当的显示比例；
        4.点击右键 查看页面元素

视口（viewport）

viewport(视口)
·视口：pc端的页面直接放到手机上面的话，不友好。原因：没有设置视口；
定义
·视口：浏览器（pc端、移动端）显示页面内容的屏幕区域；不同的屏幕大小，我们看到的区域也是不同的。

在这里插入图片描述

·viewport就是为了解决上面的问题的。
设置前
html默认设置的980px不是很合适

在这里插入图片描述



那么设置html宽度为多少才合适呢？我们眼睛能看到的，屏幕大小是多少，就显示多大，是最合适的。

语法
默认：html默认设置宽度980px；
理想：屏幕多大，html宽度就显示多大。
meta标签设置：

<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:改变html默认宽度980px 为 屏幕宽度；
·user-scalable = no:是否允许用户缩放屏幕的宽度值？no(不允许)yes(允许)
·initial-scale = 1.0:初始化缩放比例，1.0不缩放；
·maximum-scale=1.0:用户缩放页面的最大比例。值：比例；
·minimum-scale  = 1.0:用户缩放页面的最小比例。值：比例；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 
        视口的书写非常简单，只要打一个英文的感叹号，自动生成html文档的时候也就顺带生成了视口。
     -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

二倍图

二倍图
物理像素点
·指计算机显示设备上的最小显示单位。每一个像素点可以理解为屏幕上的一个放光电。每一个点可以发出一种颜色，也就组成了我们看到的图像。
·早起的物理像素点都比较大，像游戏超级马里奥里的任务显得颗粒感极强。随着技术的进步，物理像素点会被做的越来越小。

屏幕分辨率
·屏幕分辨率：有物理像素点的个数来衡量。表示屏幕水平方向和垂直方向的物理像素点的个数，物理像素点有多少个；
·iPhone3和iPhone4就是相同的屏幕大小，不同的屏幕分辨率。
·Retina(视网膜技术):是一种显示技术，将更多的物理像素点压缩到一块屏幕里面；从而达到更高的分辨率，并提高图像的细腻程度；
·物理像素点越做越小，iPhone4的物理像素点是iPhone3的物理像素点的一半。

在这里插入图片描述



图片分辨率
·假设：有200px*200px的图片分别显示在iPhone3和iPhone4上，展示的效果如下：

在这里插入图片描述

·分析：
1.200px*200px宽度上需要200个发光点；
2.一个光电显示一种颜色；连个屏幕都需要200个发光电；
3.物理像素点的大小：iPhone3（假设为1）iPhone4（就是0.5）；
4.所以显示如上；
·问题：不同的屏幕现实的图片的大小是不一样的；
1.宽度：第一个是第二个的两倍；
2.面积：第一个是第二个的四倍；
·目标：显示一样
·解决
1.物理像素点的大小：i3（1），i4（0.5）；
2.物理像素点的数目：i3（1x200 = 200长度），i4（0.5x400 = 200长度）；都是200长度才能保证显示一样。
·移动端
1.移动端如何实现长度相等呢？
2.设置css样式都为200px，可以保证显示的图像的大小都相等；
3.不同的屏幕，会自动算出相等长度需要多少的物理像素点；
4.针对上面，不同的手机会算出需要的像素点个数分别是200个和400个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{width: 100px;}
    </style>
</head>
<body>
    <h1>二倍图</h1>
    <img src="./apple50.jpg" id="id1">
    <img src="./apple100.jpg" id="id2">
</body>
</html>

移动端的常见布局

移动端常见布局
·了解常见布局不同，针对业务需求选择不同的布局方式；实际开发过程中都是混合使用，没有哪一种是绝对的单独使用的
单独制作移动端界面
·流式布局
·flex弹性布局
·less+rem+媒体查询
·混合布局
响应式页面兼容移动端
·媒体查询
·bootstrap
方案
·单独布局：淘宝、京东、苏宁的手机端都是单独布局的，流失、flex、rem布局专门针对各种手机端的屏幕进行开发；
·响应式：三星电子官网：www.samsung.com/cn/;特点：pc端移动端兼容；一个页面多个端适配显示，设计时要考虑到兼容性问题；
选择：根据公司的业务需求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{width: 100%;height: 600px;float: none;background-color: #ddd;}
        #outer>div:nth-child(1){width: 20%;height: 600px;float: left;background-color: orange;}
        #outer>div:nth-child(2){width: 10%;height: 600px;float: left;background-color: blue;}
        #outer>div:nth-child(3){width: 30%;height: 600px;float: left;background-color: lightblue;}
        #outer>div:nth-child(4){width: 20%;height: 600px;float: left;background-color: pink;}
    </style>
</head>
<body>
    <h1>流式布局</h1>
    <div id="outer">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

weixin_51630304

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Java复习打卡day45

Java复习打卡day45移动端现状视口（viewport）移动端现状移动端现状 ·了解当前浏览器内核和屏幕分辨率的问题内核 ·国内主流浏览器内核Webkit屏幕分辨率 ·手机分辨率：碎片化太多 ·Android：480x800,480x854,540x960,720x1280,1080x1920等 ·iphone：640x960,640x1136,750x1334,1242x2208等 ·2K：手机分辨率谷歌浏览器 ·是开发过程的主要模拟手
复制链接

扫一扫