精华内容
下载资源
问答
  • 移动端网页开发

    2021-04-10 16:25:27
    移动端网页开发 移动端网页开发的两种方案: 响应式网页 开发一个新的网站。使用移动端的布局方式。 响应式网页 概念 同一个网页会根据视口的不同,显示不同的样式。 优缺点 优点 面对不同分辨率的设备比较灵活。...

    移动端网页开发

    移动端网页开发的两种方案:

    1. 响应式网页
    2. 开发一个新的网站。使用移动端的布局方式。

    响应式网页

    概念

    同一个网页会根据视口的不同,显示不同的样式。

    优缺点

    优点

    1. 面对不同分辨率的设备比较灵活。
    2. 比较快捷的解决多设备的显示适应问题。

    缺点

    1. 如果兼容的设备比较多,则工作量比较大,效率比较低。
    2. 代码会比较臃肿,加载时间会比较长。

    适用场景

    1. 如果是一个小型的网站,我们一般使用响应式网页,因为响应式的开发量比较小,开发速度比较快。
    2. 如果是一个大型的网站,比如说,小米,腾讯新闻等等,适合第二种方法,开发一套适用于移动端的网站。

    如何开发响应式网页

    媒体查询

    css2就已经部分支持了,css3又新增了一些属性。IE8以下的浏览器不支持。

    1.设置meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    2.媒体查询基本语法

    @media 媒体类型 and (媒体特性){
    	样式
    }
    

    3.媒体类型

    媒体类型可以理解为各种设备。

    • all 所有的媒体类型
    • screen 屏幕设备:电脑,智能手机,平板电脑。
    • print 打印设备(极少)
    • speech 屏幕阅读器(极少,给盲人用的设备)

    4.实现方式

    1. 外链式 通过link标签的media属性来设置。
    2. 内嵌式 直接写在style标签中。

    媒体特性

    max-width min-width(重点)

    max-width:x 小于等于x时生效

        /* 媒体设备必须是屏幕设备, 小于等于1200px的时候生效。 */
        @media screen and (max-width:1200px){
          h2{
              color: green;
          }
        }
    

    min-width:x 大于等于x时生效

       /* 媒体设备必须是屏幕设备, 大于等于1300px的时候生效。 */
        @media screen and
            (min-width:1300px) {
          h2{
            font-size: 48px;
          }
        }
    

    设备方向

    属性:orientation

    1. portrait 竖屏 高大于宽
    2. landscape 横屏 宽大于高

    逻辑判断

    and:满足多个条件生效。

    ,:多个条件中满足一个时生效。

    not :不满足条件时生效。

    【注意】

    如果存在多个max-width判断,则数值大的放在前面,

    如果存在多个min-widht判断,则数值小的放在前面。

    展开全文
  • jQuery Mobile移动端网页开发使用教程.zip
  • 在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,而最近发现了一个新的调试方法,所以这篇文章主要给大家介绍了关于移动端网页开发调试神器Eruda的基本资料,...
  • rem.js移动端网页开发

    2019-07-28 15:57:02
    rem.js移动端网页开发 !(function(doc, win) { var docEle = doc.documentElement, evt = “onorientationchange” in window ? “orientationchange” : “resize”, fn = function() { var width = docEle....

    rem.js移动端网页开发


    !(function(doc, win) {
    var docEle = doc.documentElement,
    evt = “onorientationchange” in window ? “orientationchange” : “resize”,
    fn = function() {
    var width = docEle.clientWidth;
    width = width < 320 ? 320 : width;
    width = width > 1500 ? 1500 : width;
    width && (docEle.style.fontSize = 100 * (width / 1500) + “px”);
    };

    win.addEventListener(evt, fn, false);
    doc.addEventListener(“DOMContentLoaded”, fn, false);

    }(document, window));
    以上代码的意思就是在屏幕小于等于320的情况下,一个rem的长度是320/15px;
    在屏幕像素大于等于1500的情况下,一个rem的长度是1500/15px;
    一般在iphone下,一个rem是25px;

    展开全文
  • 个人收集的移动端网页很多源码,包含一些开源的框架,整理收集不容易。如果有不会使用可以私信我,看到了我会指导你怎么使用的,有需要的尽快下载吧!
  • 移动端网页开发 移动端网页开发的两种方案: 响应式网页 开发一个新的网站。使用移动端的布局方式。 响应式网页 概念 同一个网页会根据视口的不同,显示不同的样式。 优缺点 优点 面对不同分辨率的设备比较灵活。...

    移动端网页开发

    移动端网页开发的两种方案:

    1. 响应式网页
    2. 开发一个新的网站。使用移动端的布局方式。

    响应式网页

    概念

    同一个网页会根据视口的不同,显示不同的样式。

    优缺点

    优点

    1. 面对不同分辨率的设备比较灵活。
    2. 比较快捷的解决多设备的显示适应问题。

    缺点

    1. 如果兼容的设备比较多,则工作量比较大,效率比较低。
    2. 代码会比较臃肿,加载时间会比较长。

    适用场景

    1. 如果是一个小型的网站,我们一般使用响应式网页,因为响应式的开发量比较小,开发速度比较快。
    2. 如果是一个大型的网站,比如说,小米,腾讯新闻等等,适合第二种方法,开发一套适用于移动端的网站。

    如何开发响应式网页

    媒体查询

    css2就已经部分支持了,css3又新增了一些属性。IE8以下的浏览器不支持。

    1.设置meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    2.媒体查询基本语法

    @media 媒体类型 and (媒体特性){
    	样式
    }
    

    3.媒体类型

    媒体类型可以理解为各种设备。

    • all 所有的媒体类型
    • screen 屏幕设备:电脑,智能手机,平板电脑。
    • print 打印设备(极少)
    • speech 屏幕阅读器(极少,给盲人用的设备)

    4.实现方式

    1. 外链式 通过link标签的media属性来设置。
    2. 内嵌式 直接写在style标签中。

    媒体特性

    max-width min-width(重点)

    max-width:x 小于等于x时生效

        /* 媒体设备必须是屏幕设备, 小于等于1200px的时候生效。 */
        @media screen and (max-width:1200px){
          h2{
              color: green;
          }
        }
    

    min-width:x 大于等于x时生效

       /* 媒体设备必须是屏幕设备, 大于等于1300px的时候生效。 */
        @media screen and
            (min-width:1300px) {
          h2{
            font-size: 48px;
          }
        }
    

    设备方向

    属性:orientation

    1. portrait 竖屏 高大于宽
    2. landscape 横屏 宽大于高

    逻辑判断

    and:满足多个条件生效。

    ,:多个条件中满足一个时生效。

    not :不满足条件时生效。

    【注意】

    如果存在多个max-width判断,则数值大的放在前面,

    如果存在多个min-widht判断,则数值小的放在前面。

    展开全文
  • 移动端网页开发基础

    2021-09-08 16:09:20
    针对移动端的Web开发 手机 平板电脑 前端开发分类 PC端开发 移动端开发 移动Web开发 混合式开发(Hybrid App) 微信小程序/公众号开发 我们要学什么 移动Web开发基础概念 移动Web开发基础知识 响应式布局 移动端...

    什么是Web开发

    • 针对移动端的Web开发
    • 手机
    • 平板电脑

    前端开发分类

    • PC端开发
    • 移动端开发
    • 移动Web开发
    • 混合式开发(Hybrid App)
    • 微信小程序/公众号开发

    我们要学什么

    • 移动Web开发基础概念
    • 移动Web开发基础知识
    • 响应式布局
    • 移动端屏幕适配
    • 移动端事件
    • 移动端调试
    • 终端检测
    • 移动端常见问题
    • 移动端性能优化

    像素

    • 分辨率
    • 物理像素
    • CSS像素
    • 设备像素比(dpr)

    物理像素

    • 物理像素(physical pixel)
    • 设备像素(dp:device pixel)

    CSS像素

    • CSS像素
    .box {
    	width: 200px;
    	height: 200px;
    }
    
    • 逻辑像素(logical pixel)
    • 设备独立像素(dip:device independent pixel)

    设备像素比

    • 设备像素比(dpr:device pixel ratio)
    • dpr = 设备像素 / CSS像素(缩放比是1的情况下)
    • dpr = 2 表示 1个css像素用 2x2个设备像素来绘制
    • 缩放改变的是CSS像素的大小

    PPI

    • 每英寸的物理像素点
    • ppi:pixels per inch
    • dpi:dots per inch
      在这里插入图片描述
      视口–viewport
    • width=device-width
    • initial-scale=1
    • maximum-scale=1, minimum-scale=1, user-scalable=no
    document.documentElement.clientWidth
    document.documentElement.getBoundingClientRect().width
    window.innerWidth
    screen.width 不要用,有兼容性问题
    window.devicePixelRatio
    

    box-sizing

    • content-box
    • border-box

    图标字体
    阿里巴巴矢量图标库(https://www.iconfont.cn/)

    flex布局—容器属性

    • flex-direction: row | row-reverse | column | column-reverse;
    • flex-wrap: nowrap | wrap | wrap-reverse;
    • flex-flow: <flex-direction>|| <flex-wrap>;
    • justify-content: flex-start | flex-end | center | space-between | space-around;
    • align-items: flex-start | flex-end | center | baseline | stretch;
    • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    flex布局—项目属性

    • order: ;
    • flex-grow: ; /* default 0 */
    • flex-shrink: ; /* default 1 */
    • flex-basis: ; | auto; /* default auto */
    • flex: none | [ <flex-grow> || <flex-shrink> || <flex-basis> ]
    • align-self: auto | flex-start | flex-end | center | baseline |
      stretch;

    媒体查询

    • 媒体类型
    • all/print/screen/speech
    • 逻辑 与( and )、或(,)、非(not)

    媒体特征表达式

    • width/orientation/device-pixel-ratio/aspect-ratio
    • 策略: 移动优先/PC优先

    移动端常用单位

    • px
    • %
    • em
    • rem
    • vw/vh

    什么是响应式布局

    • 2010年5月由 Ethan Marcotte 提出的一个概念
    • 一个网站兼容多种终端
    • 对不同屏幕尺寸(大小)做出响应,并进行相应布局的一种移动Web开发方式

    响应式布局的原理在这里插入图片描述
    什么是栅格系统

    • 响应式布局的一种实现方式
    • 将页面栅格化

    移动端屏幕适配是什么

    • 移动端
    • 屏幕适配
    • 使页面在移动端各种大小的屏幕上都能够正常显示的一种移动端开发方案

    与响应式布局的关系:适应各种屏幕尺寸

    移动端适配响应式布局
    终端仅移动端PC端和移动端
    常用单位宽高:rem / % 字体:px宽:%高、字体:px
    宽和高宽和高都随着屏幕大小变化等比例宽度变化,高度不变非等比例

    移动端适配疑问

    • 必须使用rem?
    • px、%、em、rem、vw/vh
    • 媒体查询只能用在响应式布局?

    其他适配方案

    • 固定宽高
    • vw/vh

    简单适配方案

    • docEl.style.fontSize = viewWidth / ratio + ‘px’
    • viewWidth = docEl.getBoundingClientRect().width ||
      window.innerWidth
    • ratio = 18.75

    通用适配方案

    • dpr = window.devicePixelRatio || 1
    • scale = 1 / dpr
    • content = ‘width=device-width, initial-scale=’ + scale + ‘,minimum-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘,user-scalable=no’;
    展开全文
  • remScale 适用于移动端页面开发,所有的像素值单位不在是px而是rem,1rem=100px ,可在js文件中修改设计稿的的尺寸
  • web前端教程用大白话,来讲编程最近有小伙伴在微信上跟我聊到了移动端网页开发调试困哪的问题,这个相信很多前端开发者都遇到过。有一天,测试妹子拿着测试手机过来找你,说页面打...
  • 移动端网页开发进阶

    2021-09-08 16:51:36
    移动端事件 : 触摸事件 移动端事件有哪些 触摸事件 touch事件 pointer事件 手势(gesture)事件 传感器(sensor)事件 touch事件 touchstart/touchmove/touchend touches/targetTouches/changedTouches pageX pageY/...
  • Stylus是一款能改变网站样式的样式管理器,该插件主要能将他人提供的网页样式或自己编写的样式安装在网页中,在不改变网页整体布局的情况下将其变成使用者需要的样子。在安装了该插件后,使用者可以在插件提供的网站...
  • 移动端网页开发软键盘弹起,输入框放在软键盘之上,和微信朋友圈评论效果一样? 如何实现,我试了很久,不是input输入框和软键盘之间有空隙,就是被软键盘挡住 。有哪位大神有过这方面的开发,希望能给个建议,或者...
  • 智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计...
  • 在触屏设备中,监听用户手势操作,包括上下左右滑动,可以自定以手势滑动的距离,具体代码如下 //监听用户滑动手势 $("body").on("touchstart", function (e) { e.preventDefault();...
  • 使用Antd-Mobile开发时,底部TabBar以上的整个页面点击事件均无效,右键检查元素发现原因为底部TabBar占据了整个页面,情况类似如图 解决方案:底部导航加个z-index:-1就可以了 ...
  • 目录 一、移动端基础 1.1常见移动端屏幕尺寸 1.2移动端调试方法 二、视口 2.1布局视口layout viewport ...2.2视觉视口visual viewport ...四、移动端开发选择 4.1移动端主流方案 五。移动端技术解决方案 ...
  • 最近由于项目需求,需要长按弹出一个自定义菜单项供用户选择操作,此功能可用jquery的touchstart,touchmove,touchend三个触碰事件外加时间器实现,在网上找了很多,发现大部分加入这段css代码就能解决此问题,但是...
  • 技术文档 http://blog.csdn.net/iefreer/article/details/12653193 简介 ... 非常好用,适合移动开发 1.emulation 在桌面上模拟多种设备 Iphone3--5,ipad,Nexus S --6 2.能
  • 移动端浏览器兼容性较好,可以不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。比如触屏事件(也称触摸事件),Android和IOS都有。 touch对象代表一个触摸点。触摸点可能...
  • element.classList.add(’类名’); 例如: focus.classList.add(‘current’);
  • 移动端网页开发在网上可以找到很多种开发方案,本篇博文记录的是采用rem来开发移动端网页的一些过程。 rem 首先,在css当中的单位分为两大种,一种是绝对单位,一种是相对单位。例如常用的px就是绝对单位,而本篇...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,537
精华内容 15,814
关键字:

移动端网页开发