| part1.3.2移动端小程序开发 | 您所在的位置：网站首页 › 100100px图片 › part1.3.2移动端小程序开发 |
part1.3.2移动端小程序开发
|
移动端基础浏览器现状 pc端常见：360、谷歌、火狐、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见：UC、QQ、欧朋、百度手机、360安全、谷歌、搜狗、猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ是根据webkit修改过来的 内核，尚无自主研发的内核，就像国内的手机是基于安卓开发的一样。 总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。 手机屏幕现状手机屏幕尺寸非常多，碎片化严重Android设备有多重分辨率：480x800,480x854,540x960,720x1280,1080x1920等，还有传说中的2k,4k屏幕iphone的碎片化也加剧了，主要有640x960,640x1136,750x1334,1242x2208等开发者只关心设计图分辨率。我们常用的单位是px 移动端调试方法：谷歌浏览器中的模拟手机调试搭建本地web服务器，手机和服务器在一个局域网内，通过手机访问服务器使用外网服务器，直接IP或者域名访问总结移动端主要针对webkit内核进行兼容我们现在学习的开发主要针对手机端现在移动端碎片化严重，分辨率和屏幕大小不一学会用谷歌浏览器模拟手机页面以及调试视口视口（viewport）是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。布局视口layout viewport一般的移动设备浏览器都默认设置了一个布局视口，用于解决早期的pc端页面在手机上显示的问题iOS，android基本都将这个视口分辨率设置为980px,所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可通过手动缩放网页。 视觉视口visual viewpart是用户正在看到的网站的区域。注意：是网站的区域。 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的高度。  理想视口ideal viewport为了使网站在移动端有最理想的浏览和阅读宽度而设定。理想视口对于设备来说是最理想的视口尺寸。需要手动添写视口标签通知浏览器操作。视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单来说就是屏幕多宽布局就设置多宽。视口标签 标准的viewport参数设置视口宽度与设备保持一致视口的默认缩放比例是1.0不允许用户自行缩放最大允许的缩放比例1.0最小允许的缩放比例1.0总结视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口和理想视口我们移动端布局想要的理想视口就是手机屏幕有多宽，我们的布局视口就有多宽想要理想视口，我们需要给我们的移动端页面添加标签像素比 pc端和早期的手机屏/普通手机屏幕：1css像素=1物理像素 Retina（视网膜屏幕是一种显示技术，可以将把更多的物理像素点压到一块屏幕里，从而达到更高的分辨率，提升屏幕的细腻程度），产生了物理像素比。 多倍图对于一张50*50px的图在Retina屏幕打开里占有的像素点是100*100px,会让图片变模糊解决办法：可以用一个本身是100100px的像素图替换原本的图片然后设置图片宽度50*50px在标准的viewport设置中，使用倍图来提高图片质量，解决高设备里的模糊问题。通常使用二倍图，因为iphone6/7/8的影响，但是现在还存在三倍图四倍图的情况，这个看实际开发需求。注意背景图片缩放问题。
*{
margin: 0;
padding: 0;
}
img:nth-child(2){
width: 50px;
height: 50px;
}
.box{
height: 50px;
width: 50px;
background: url(images/apple100.jpg) no-repeat;
background-size: 50px 50px;
}
 启动图是原始尺寸，开发后缩小到开发尺寸。 多倍图切图 移动开发选择单独制作移动端页面（主流）布局： 流式布局（百分比布局）flex弹性布局（推荐）less+rem+媒体查询布局混合布局如京东商城手机版、淘宝触屏版、苏宁易购手机版、携程网手机版等。 通常情况下，网址域名前加m(mobile)可以打开移动端。通过判断设备，如果是移动端设备会跳到移动端页面。如http://m.taobao.com m.jd.com m.suning.com等。 响应式页面兼容移动端（其次）布局： 媒体查询bootstrap三星手机官网等。 响应式网站：及PC端和移动端用一个网站，不过在不同宽度屏幕下，样式会自动适配。通过判断屏幕宽度改变样式。 三星的官网 www.samsung.com 缺点：制作麻烦，要花大精力调整兼容性问题。 总结：现在市场常见开发为单独制作移动端页面和单独制作移动端页面方法，主流的选择是前一种。 移动端技术解决方案浏览器移动端浏览器基本以webkit内核为主。我们可以放心使用h5标签和css3。同时我们的浏览器私有前缀只需要考虑添加-webkit-即可。 css初始化normalize.css移动端初始化推荐使用normalize.css。是一个可定制的css文件。他让不同的浏览器在渲染网页元素的时候形式更统一，是一种现代的、为HTML5准备的优质替换方案。 优点： 保护了有价值的默认值。修复了浏览器bug，解决了浏览器不一致的默认样式。Normalize.css是模块化的，提高了可用性。Normalize.css拥有详细的文档。官网：http://necolas.github.io/normalize.css/css3盒子模型box-sizing传统模式宽度计算：盒子宽度=css中设置的width+border+padding css3盒子模型：盒子的宽度=css中设置的宽度width里面包含了border和padding，也就是说，我们的css3中的盒子模型，padding和border不会撑大盒子了。  如何选择使用传统或者css3box模型： 移动端可以全部用css3盒模型PC端如果完全需要兼容，要使用传统模式，如果不考虑兼容性，我们就选择css3盒子模型。特殊样式 流式布局（百分比布局）流式布局，就是百分比布局，也称非固定像素布局。通过将盒子的宽度设置为百分比，从而根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局是移动web开发常见的布局方式。注意事项 制作过程中，要定义页面的最大和最小宽度。 max-width 最大宽度。（max-height 最大高度） min-width 最小宽度。（min-height 最小高度） jd页面1.技术选型 使用单独制作移动页面方案，技术使用流式布局。 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 4.设置常用css初始化样式（在index里） body{ margin:0,auto; min-width:320px; max-width:540px; background:#fff; font-size:14px; font-family:-apple-system,Helvetica,sans-serif; line-height:1.5; color:#666; } 5.特殊样式 /* css3盒子模型 */ box-sizing:border-box; -webkit-box-sizing:border-box; /* 点击高亮我们要清除，设置为transparent完成透明 */ *{ -webkit-tap-highlight: transparent; } /* 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */ input{ -webkit-appearance: none; } /* 禁用长按页面时的弹出菜单 */ img,a{ -webkit-touch-callout: none; } 二倍精灵图做法在firework里将精灵图等比例缩放为原来的一半之后根据新的大小测量坐标注意代码里的background-size也要写：精灵图原来宽度的一半线性渐变颜色做法background: linear-gradient(color1,color2); 2.改变渐变方向 1）通过设置渐变终点 background: linear-gradient(direction,colro1,color2); 其中，direction即为设置渐变终点。（to ....) 【从左到右，就将direction写成to right，到右上就写成 to right top】 DPG图片京东自主研发的图片压缩技术 节省用户近50%浏览流量，极大提升用户网页打开速度 能够兼容jpeg，实现全平台、全部浏览器的兼容支持 压缩后的图片和webp的清晰度对比没有差距 flex布局（携程项目）传统布局：兼容性好；布局繁琐；局限性，不能很好的在pc端布局 flex布局：操作方便，布局相对简单，移动端应用广泛；pc端支持情况较差；IE或更低版本，不支持或仅仅部分支持 建议：pc端传统布局;如果是移动端或者不考虑兼容性的pc端页面布局，我们还是用flex弹性布局  flex布局原理flex是flexible box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设置flex布局后，子元素的float\clear和vertical-align将失效伸缩布局=弹性布局=弹性盒布局=flex布局采用flex布局的元素，称为flex容器，简称容器（flex container）。所有子元素自动称为容器成员（flex item），称为flex项目。简称项目。子项目可以横向也可以纵向排列。flex父元素常见属性以下六个都是对父元素设置的 flex-direction:设置主轴方向justify-content:设置主轴上子元素排列方式flex-wrap设置子元素是否换行align-content:设置侧轴上的子元素排列方式（多行）align-items:设置侧轴上的子元素排列方式（单行）flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrapflex的主轴和侧轴在flex布局中有分为主轴和侧轴两个方向。同样的叫法：行和列、x和y轴。默认主轴就是x轴方向，水平向右。默认侧轴就是y轴方向，垂直向下。通过flex-direction设置主轴方向flex-direction属性决定主轴的方向（即项目的排列方向） 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴剩下的就是侧轴。我们的主元素是跟着主轴排列。 属性值： 解释说明： row 默认值水平从左到右 row-reverse 从右到左 column 垂直从上到下 column-reverse从下往上 justify-content主轴上子元素的排列方式justify-content定义了项目在主轴上的对齐方式。注意：使用这个属性前要确定主轴是谁属性值： 解释说明： flex-start 默认值左侧 flex-end 右侧 center 居中 space-around 自动平均分布空白值的左右margin space-between 先两边对齐，其他子元素平分剩余空间 flex-wrap设置子元素是否换行默认情况下，项目都排在一条水平线上（又称轴线）flex-wrap属性定义：flex布局中默认不换行的属性值： 解释说明： nowrap 默认值不换行 wrap 换行 align-items设置侧轴上子元素排列方式（单行）该属性是控制子项在侧轴（默认是y轴）上的排序方式改子项在单行时使用属性值： 解释说明： flex-start 从上到下 flex-end 从下到上 center 挤在一起居中（垂直居中） stretch 拉伸 align-content设置侧轴上子元素排列方式（多行）该属性是控制子项在侧轴且只能在子元素出现换行的情况使用，单行的情况下没有效果。属性值： 解释说明： flex-start 在侧轴的头部开始排列。 flex-end 在侧轴的尾部开始排列。 center 在侧轴中间显示。 space-around 子轴在侧轴平分空间。 space-between 子轴在侧轴先分布在两头，然后平分剩余空间。 stretch 设置子项元素高度平分父项元素高度。 flex-flowflex-flow属性是flex-firection和flex-wrap的复合写法。flex-flow： row nowrap;flex布局子项常见属性flex 子项目占有的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序）flex属性flex属性定义子项目分配父盒子内的剩余空间，用flex表示占多少份数。属性值为数字，数字为1，表示占总份数中的1份，默认为0。.item { flex:; /* default 0*/ } 比如 div nth-child{ flex:1; height:100%; background-color:green;} 如果给一行里所有的子元素都加上flex：1;就会平分父元素的剩余空间。 align-self控制子项自己在侧轴的排列方式align-self属性允许单个项目有与其他项目不一样的排列方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch(拉伸）。span:nth-child(2){ /*设置自己在侧轴上的排列方式*/ align-self:flex-end; } order属性定义项目的排列顺序数值越小，排列越靠前，默认为0（如果想往前，属性值可以为负，如果想往后可以设置更大的属性值）注意：和z-index不一样.item{ order:; } 携程网制作1技术选型：采用flex布局，单独制作 2.搭建文件夹结构 3.设置视口标签以及引人初始化样式。 4.设置页面初始样式 5.网站常见模块命名：search-index (搜索栏） focus（顶部宣传图） local-nav（顶部大导航） nav（导航）subnav-entry（底部小导航） sales-box（中间的特惠以及领劵中心区域） tool-box（底部的电话咨询\查询客户端等区域） rem单位（苏宁项目）rem(root em)是一个相对单位；类似于em,em是父元素字体大小。不同的是rem的基准是相对于元素的字体大小。比如，根元素(html）设置font-size=12px；非根元素设置width:2rem;转换成px表示就是24px。rem的优势：父元素可能文字大小不一致，但是整个页面只有一个，可以很好地控制整个页面的元素大小比例。eg: html {font-size:12px;} div {font-size:2rem;}媒体查询媒体查询（media query）是css3新语法。 使用@media查询，可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。目前针对很多苹果、安卓手机、平板设备都用得到多媒体查询。语法规范用media开头注意@符号 。mediatype媒体类型。关键字 and not or only。media feature媒体特性，必须有小括号包含。@media mediatype and|not|only(media feature){css-code;}mediatype媒体类型将不同的终端划分为不同的类型，称为媒体类型 值 解释说明 all 用于所有设备print 用于打印机和打印预览screen 用于电脑屏幕、平板电脑，智能手机等关键字关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件 and：可以将多个媒体特性连接到一起，相当于且的意思 not：排除某个媒体类型，相当于“非的意思，可以省略。 or：可以测试多个媒体查询的条件，只要有一个条件成立，就执行，或的意思 only：指定某个特定的媒体类型，可以省略。 如：  每种媒体特性具有不同的特性，根据不同的媒体特性设置不同的展示风格。暂且了解三个。注意要加小括号进行包含。 值 解释说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 案例根据页面宽度改变背景变色 实现思路： 按照从大到小或者从小到大的策略注意我们有最大值max-width和 最小值min-width都是包含等于的当屏幕低于540px，背景色变为蓝色（x•按照不同屏幕划分为1~12等份 •行（row）可以去除父容器作用15px的边距 • xs-extra small: 超级小 ； sm-small:：小; md-medium: 中等；Ig-large: 大； •列（column）大于12,多余的 "列（column）"所在的元素将被整体另起一行排列 •每一列有默认有左右15像素的padding •可以同时为一列指定多个设备的类名，以便划分不同份数例如class=ncol-md-4 col-sm-6n 使用： 列嵌套栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。  列偏移有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。实际上这些类是通过使用选择器为当期元素添加了 列排序列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。 bootstrap响应式布局工具为了加快对移动设备友好的页面开发，利用媒体查询并使用这些工具类可以方便的针对不同设备显示或隐藏页面内容。  bootstrap其他（按钮、表单、表格）请参考bootstrap文档。 阿里百秀屏幕划分分析1.页面布局分析 2.屏幕划分分析 因为中屏和大屏的屏幕划分相同，所以只设置col-md-就可以了，md是中屏大于等于970以上的 屏幕缩小发现小屏幕布局发生变化，因此我们需要为小屏幕布局需求改布局,设置col-sm- 屏幕缩小发现超小屏幕又发生变化，所以在设置col-xs- 3.bootstrap四部曲 1.创建文件夹结构2.创建html骨架结构3.弓I入相关样式文件4.书写内容 .container里加一个row的盒子就可以消除container的内边距。 在样式里添加!important可以防止重要样式被别的属性层叠。 制作中的补充多行溢出显示省略号：overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2;//想要的行数 -webkit-box-orient:vertical;单行文本溢出显示省略号：.ellipsis{//单行文本溢出 overflow: hidden; text-overflow:ellipsis;//文本溢出显示省略号 white-space:nowrap;//文本不会换行（单行文本溢出） width:130px; background-color: red; }如何去掉a标签的下划线去掉下划线只需要在样式里面加入 a{ text-decoration:none; } 或者 这里是A标签.. |
【本文地址】