移动端WEB开发

最新推荐文章于 2024-07-24 20:47:06 发布

imfs12

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量118

点赞数

文章标签： html5 css3 html css

本文链接：https://blog.csdn.net/imfs12/article/details/113694768

版权

移动端WEB开发

移动端得基础

移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要是针对手机开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
用谷歌浏览器模拟手机页面以及调试

视口

视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口和理想视口
我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽想要理想视口，
我们需要给我们的移动端颍面添加meta视口标签

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

二倍图

我们需要一个50*50像素（css像素）的图片直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊
我们采取的是放一个 100* 100 图片然后手动的把这个图片缩小为 50* 50 （css像素）
我们准备的图片比我们实际需要的大小大2倍，这就方式就是 2倍图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
  
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

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

</html>

背景缩放

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            /* background-size: 图片的宽度 图片的高度; */
            /* background-size: 500px 200px; */
            /* 1.只写一个参数 肯定是宽度 高度省略了  会等比例缩放 */
            /* background-size: 500px; */
            /* 2. 里面的单位可以跟%  相对于父盒子来说的 */
            /* background-size: 50%; */
            /* 3. cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全 */
            /* background-size: cover; */
            /* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */
            background-size: contain;
        }
    </style>
</head>

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

</html>

特殊样式

1.css3盒子模型

box-sizing: border-box;
-webkit-box-sizing: border-box;
2.点击高亮我们需要清除清除设置为transparent完成透明

-webkit-tap-highlight-color: transparent;
3.在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance: none;
4.禁用长按页面时的弹出菜

img,a { -webkit-touch-callout: none; }

imfs12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端WEB开发

移动端WEB开发移动端得基础移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要是针对手机开发现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一用谷歌浏览器模拟手机页面以及调试视口视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口和理想视口我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽想要理想视口，我们需要给我们的移动端颍面添加meta视口标签<meta name="viewport" content="w.
复制链接

扫一扫