移动web基础知识(下)

最新推荐文章于 2022-10-16 22:39:07 发布

远方0905

最新推荐文章于 2022-10-16 22:39:07 发布

阅读量141

点赞数

文章标签：移动web基础知识

本文链接：https://blog.csdn.net/qq_43198727/article/details/103058227

版权

移动web基础知识下。
背景缩放
background-size 属性规定背景图像的尺寸
background-size:背景图片宽度背景图片高度；
单位: 长度|百分比|cover|contain;
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
下面介绍一个切图神器
可以设置三倍图二倍图。
选中图片再选要的倍图然后导出选中图层。
在这里插入图片描述
这个cutterman切图神器可以直接去官网下载
 安装步骤

直接点击就可以访问。
来继续回到知识整里。

移动端开发选择
**1、单独制作移动端的页面例如京东淘宝手机版 **
通常情况下，网址域名前面加M(mobile) 可以打开移动端开，则跳转到移动端页面。
2、响应式页面兼容移动端三星手机官网
通过判断屏幕宽度来改变样式，以适应不同终端。
缺点 :制作麻烦，需要很大的精力去调节
现在市场主流的选择还是单独制作移动端页面。

** 移动端技术解决方案**
在这里插入图片描述
移动端的css初始化推荐使用normalize.css/ 因为移动端用的都是Webkit的内核支持CSS3。
优点：

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

在这里插入图片描述
官方网站

特殊样式:

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

<!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>
        a {
            -webkit-tap-highlight-color: transparent;/*点击高亮我们需要清除 设置为transparent完成透明*/
        }
        
        input {
            -webkit-appearance: none;/*在移动段浏览器的外观在ios上加上这个属性次啊能给按钮输入框自定义样式*/
    </style>
</head>

<body>
    <a href="#">德玛</a>
    <input type="button" value="按钮">
</body>

</html>

在这里插入图片描述
我们的基础知识就讲完了，更多的还是实践。

远方0905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web基础知识(下)

移动web基础知识下。背景缩放background-size 属性规定背景图像的尺寸background-size:背景图片宽度背景图片高度；单位: 长度|百分比|cover|contain;cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。...
复制链接

扫一扫