11.移动端注意事项

2022-01-11 14:33:11 阅读：130 来源： 互联网

标签：11 box none 布局像素注意事项 webkit 移动 border

确定技术选型：方案：单独制作移动页面方案

技术：布局采取流式布局

题外知识：制作favicon.ico图标制作ico图标 | 在线ico图标转换工具方便制作favicon.ico - 比特虫 - Bitbug.net

1.视口（选择理想视口）：设备有多宽，布局视口有多宽

meta视口标签标准设置： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,
maximum-scale=1.0,minimum-scale=1.0">
<!--user-scalable除此之外，都是以-scale结尾 -->

2.二倍图：我们开发时的1像素，不一定真实的物理像素是1像素，可能是2像素

也就是说 开发1像素=实际2像素一般开发375px，对应750px开发图

例：50px*50px图片，在iphone8里面显示变大两倍 100px*100px，图片会变模糊

解决方法：准备100px*100px的图片，缩小2倍为50*50的图片，这样图片再扩大2倍，就不会变模糊了。（所以图片要准备两倍图）

3.背景缩放：background-size：图片的宽度图片的高度；（可以跟百分比，相对于父盒子来说）

background-size：cover（完全覆盖） | contain （使宽高等比例缩放，直到其中一边先接触父盒子）

4.移动端开发选择

1.单独移动端页面

2.响应式兼容pc移动端

5.移动端css初始化normalize.css （https://necolas.github.io/normalize.css/）

6.移动端可以任意使用css3盒子模型：box-sizing：border-box；padding和border不会撑大盒子

7.移动端特殊样式设置：

body {

box-sizing: border-box;

-webkit-box-sizing: border-box;

}

/* 禁止长按页面是弹出菜单 */

img,

a {

-webkit-touch-callout: none;

}

/* 点击高亮我们需要清除，设置为transport变成透明 */

-webkit-tap-highlight-color: transparent;

}

input{

/* 在移动端浏览器默认的外观ios上加上这个属性，才能给按钮和输入框自定义样式 */

-webkit-appearance: none;

}

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

8.移动端技术选型

单独制作页面：流式布局（百分比布局）| flex弹性布局（推荐） | less+rem+媒体查询布局 |混合布局

响应式页面兼容移动端：媒体查询 | bootstrap

9.流式布局（百分比布局）：非固定像素布局，通过盒子宽度设置成百分比，根据屏幕宽度来进行伸缩，不受像素的限制；

10.图片底侧空白缝隙：在布局一开始就把img {vertical-align:middle}

以下流式布局（百分比布局）初始化css代码

body {
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
  font-family: -apple-system, Helvetica, sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  background-color: #ccc;
/*css3盒子模型*/
 box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
*{
  /* 点击高亮  我们需要清除，设置为transport变成透明 */
  -webkit-tap-highlight-color: transparent;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  vertical-align: middle;
}
/* 禁止长按页面是弹出菜单 */
img,
a {
  -webkit-touch-callout: none;
}
input{
    /* 在移动端浏览器默认的外观ios上加上这个属性，才能给按钮和输入框自定义样式 */
  -webkit-appearance: none;
/* 去除input输入框默认外边框 */
outline:none;
}

html浏览器端初始化代码

 <!-- 移动端页面初始化 -->
  <meta name="viewport" content="width=device-width,
    initial-scale=1.0,user-scalable=no,
    maximum-scale=1.0,minimum-scale=1.0">
    <!-- seo搜索引擎优化TDK三大标签优化 -->
<meta name="description" content="关键词">
<meta name="keywords" content="搜索关键词">
<title>京东流式布局</title>
  <!-- 引入图标 -->
  <link rel="shortcut icon" href=" /favicon.ico" />
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <link rel="stylesheet" href="css/index.css">

标签：11,box,none,布局,像素,注意事项,webkit,移动,border
来源： https://blog.csdn.net/samllucky/article/details/122411009

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

11.移动端注意事项