移动开发web第一天

一、适配问题解决方案:流式布局 + viewport
1、流式布局
百分比布局,通过设置盒子的宽度为百分比来根据屏幕的大小进行伸缩,特点是不受固定像素的限制,内容向两侧填充
2、viewport
在移动端用来承载网页的这个区域,就是我们的视觉窗口,也叫viewport(视口), 这个区域可设置高度宽度,可按比例放大缩小,而且能设置是否允许用户自行缩放。
<meta name = "viewport">让浏览器知道设置了viewport,viewport只在移动端识别
3、viewport 参数
width:定义viewport的宽度,有一个特殊值 device-width当前设备的宽度
initial-scale:默认的初始缩放比
设置1.0,和PC端页面的显示比例一致,一比一显示在移动端
user-scalable:是否允许用户自行缩放 1-yes,0-no
maximum-scale:最大缩放比
minimum-scale:最小缩放比
4、构建标准的移动端web开发页面
<meta name = "viewport" content = "width = device-width,initial-scale = 1.0, user-scalable = 0">
快捷键—meta:vp
二、在写项目要注意的问题
base样式定义:reset css 重置默认的、浏览器自带的一些样式(所有的标签和伪类),目的是保持各种终端显示一致
1、在移动端特殊的设置
①清楚点击高亮效果
-webkit-tap-highlight-color: transparent;
②设置所有的盒子的宽度以边框开始计算
在移动端通常使用的是百分比布局,那么这样的布局如果使用border或者padding会使容器的宽度超出屏幕的宽度产生滚动条。
-webkit-box-sizing: border-box;
box-sizing: border-box;
③清除input默认的样式

  • webkit-appearance: none;
    2、最小宽度、最大宽度的限制
    min-width:300px; //适配小屏幕设备,为了有较好的布局效果。
    max-width:640px;//保证页面在尺寸比较大的设备当中保证页面的效果也就是清晰度
    3、物理像素和图标模糊度问题
    解决方案,采用压缩图标尺寸的方式来解决。
    如果是Img使用直接设置宽高的方式来压缩。
    如果是背景使用的是设置background-size的方式来压缩
    4、搜索按钮调用
    在移动端调用输入法,弹出的小键盘enter键会变成搜索按钮
    <form action = "#">
    <input type = "search" placeholder = "提示" />
    </form>
    5、结构性伪类原则器---同类型选择器
    E:first-of-type匹配同类型中的第一个元素E。
    E:last-of-type匹配同类型中的最后一个元素E。
    E:nth-of-type(n) 匹配同类型中的第n个元素E。

转载于:https://blog.51cto.com/13517854/2067593

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255544.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

均值滤波 中值滤波 高斯平滑滤波

均值滤波是典型的线性滤波算法&#xff0c;它是指在图像上对目标像素给一个模板&#xff0c;该模板包括了其周围的临近像素&#xff08;以目标象素为中心的周围8个像素&#xff0c;构成一个滤波模板&#xff0c;即去掉目标像素本身&#xff09;&#xff0c;再用模板中的全体像素…

javaWeb开发总结 ---- 前端数据插入到后台

一&#xff0c;概述&#xff1a; 本文主要描述如何将数据通过表单提交到后台并插入到数据库&#xff0e;其中后台使用spring框架&#xff0e; 二&#xff0c;开发流程&#xff1a; 明确需求&#xff0c;即将什么数据插入到数据库平台搭建&#xff0c;配置spring, 数据库&#…

对clear float 的理解

之前自己对于清除浮动的用法比较模糊 &#xff0c;如果用到的话&#xff0c;一般都是采用简单粗暴的方式解决&#xff0c;就是直接用overflow&#xff1a;hidden&#xff0c;但是越用久就会发现其实有BUG&#xff0c;这个BUG正是overflow&#xff1a;hidden带来的&#xff0c;因…

【机器视觉】——相机标定降低重投影误差方法

目录 一、标定结果分析 二、影响标定误差的原因 1、平面标定板黑白棋盘格的精度

linux 安装RedisLive

为什么80%的码农都做不了架构师&#xff1f;>>> RedisLive 用来监控Redis&#xff0c;便于redis性能分析 安装步骤&#xff1a; 1.安装pip&#xff08;代码参考&#xff1a;https://github.com/pypa/pip&#xff09; 官方网站&#xff1a;https://pypi.python.org/…

高斯滤波和双向滤波的区别与联系

1. 简介 图像平滑是一个重要的操作&#xff0c;而且有多种成熟的算法。这里主要简单介绍一下Bilateral方法&#xff08;双边滤波&#xff09;&#xff0c;这主要是由于前段时间做了SSAO&#xff0c;需要用bilateral blur 算法进行降噪。Bilateral blur相对于传统的高斯blur来说…

Eclipse变量名自动补全问题 自定义上屏按键为TAB

Eclipse空格等号等都可以上屏&#xff0c;这样有时候输入变量名再按空格就会自动补全&#xff0c;非常讨厌。那么怎么办呢&#xff1f; 1.首先你的Eclipse需要装有 Eclipse plug-in development environment 和 Eclipse JDT Plug-in Developer Resources 或者直接去下载一个和…

Dreamweaver CS6 Mac破解版

介于之前小子分享的Mac版的Adobe的PS CS6和Illustrator CS6&#xff0c;有用户要求小子分享下Dreamweaver&#xff0c;小子当然乐意效劳。 Dreamweaver CS6 是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面&#xff0c;用于制作并编辑网站和移动应用程序的网页设计软件。…

【pyqt5学习】——graphicView显示matplotlib图像

目录 一、导入模块 二、自定义一个matplotlib窗口类Figure 三、利用QT_designer绘制窗口 四、写逻辑代码 五、结果展示 一、导入模块 import matplotlibmatplotlib.use("Qt5Agg") from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg from matplo…

happens-before规则

1&#xff09;程序顺序规则&#xff1a;一个线程中的每个操作&#xff0c;happens-before于该线程中的任意后续操作。2&#xff09;监视器锁规则&#xff1a;对一个锁的解锁&#xff0c;happens-before于随后对这个锁的加锁。3&#xff09;volatile变量规则&#xff1a;对一个v…

what is ssao

说到ssao 就要从ao说起&#xff0c;ao&#xff0c;即间接环境光遮蔽技术。我们知道现实中的光线&#xff0c;除了来自太阳和电灯的直射光线以外&#xff0c;光线碰到物体以后&#xff0c;还会再次反射&#xff0c;折射&#xff0c;而再次反射折射的过程中&#xff0c;又会被其他…

【pyqt5学习】——groupBox显示matplotlib图像

目录 一、导入模块 二、创建matplotlib窗口类 三、qt_designer设计窗口 四、逻辑代码 五、结果展示 一、导入模块 import matplotlibmatplotlib.use("Qt5Agg") from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg from matplotlib.figure impor…

[BZOJ3545][ONTAK2010]Peaks

[BZOJ3545][ONTAK2010]Peaks 试题描述 在Bytemountains有N座山峰&#xff0c;每座山峰有他的高度h_i。有些山峰之间有双向道路相连&#xff0c;共M条路径&#xff0c;每条路径有一个困难值&#xff0c;这个值越大表示越难走&#xff0c;现在有Q组询问&#xff0c;每组询问询问从…

杭电1027Ignatius and the Princess II模拟

地址&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid1027 题目&#xff1a; Problem DescriptionNow our hero finds the door to the BEelzebub feng5166. He opens the door and finds feng5166 is about to kill our pretty Princess. But now the BEelzebub has t…

angular 使用rxjs 监听同级兄弟组件数据变化

angular 的官网给出了父子组件之间数据交互的方法&#xff0c;如ViewChild、EventEmitter 但是如果要在同级组件之间进行数据同步&#xff0c;似乎并没有给出太多的信息。 有时候我们想&#xff0c;在一个组件中修改数据之后&#xff0c;马上反映到另外一个组件中&#xff0c; …

OpenCV里IplImage的widthStep参数 和width参数

一直以为IplImage结构体中的widthStep元素大小等于width*nChannels&#xff0c;大错特错&#xff01;&#xff08;为了快速访问&#xff0c;要内存对齐啊&#xff09;查看OpenCV2.1的源码&#xff0c;在src/cxcore/cxarray.cpp文件中&#xff0c;找到cvInitImageHeader函数&…

【数字信号处理】——Python频谱绘制

# -*- coding: utf-8 -*- from matplotlib import pyplotpyplot.rcParams[font.sans-serif] [SimHei] pyplot.rcParams[axes.unicode_minus] Falseimport numpy as np import matplotlib.pyplot as pl import matplotlib import math import randomN 500 # 绘制点总数 fs 5…

Android开发:《Gradle Recipes for Android》阅读笔记1.3

想命令行执行gradle的构建&#xff0c;可以通过提供的gradle wrapper或者安装gradle。 构建android项目不需要安装gradle&#xff0c;因为android studio已经包含gradle。"gradle wrapper"指的是根目录下的gradlew和gradlew.bat脚本&#xff08;结尾的w是wrapper的意…

pic

转载于:https://www.cnblogs.com/edisonxiang/p/5392651.html