单独的css参考为移动，建议的最大设备宽度？ - 腾讯云开发者社区

216 217 218 整个页面可以同这个框架，应该可以做到文本在中间显示，已经加入整个页面，padding:10px为填充扩宽...= "auto"> 226 227 位置随机调整，为屏幕宽度的...贴上页面效果： TTyb-css 的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。...整个页面可以同这个框架，应该可以做到文本在中间显示，已经加入整个页面，padding:10px为填充扩宽10px 绝对定位，位置想在哪里就在哪里位置随机调整，为屏幕宽度的50%

1.5K5 0

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓...通过我的研究,最终还是很快用CSS解决了....需要的效果,如下图: 需求分析看图,其实很简单.如果宽度是固定的,那么这个布局就不要太简单了. 问题是,设备的宽度是不固定的哦,那么问题就是,在不知道具体宽度的时候,如何来设定它对应的高度呢?...也就是说,如何在CSS中,找到一个高度和宽度挂钩的属性.只要存在这个参数,那么,问题就能解决. 那么有没有这个参数呢?...在我们遇到一些问题的时候,尤其是布局这种问题,我们要考虑的是,能不能用CSS解决,而不时一位的去考虑JS.毕竟,JS是用来交互的,而CSS是用来布局的.

1.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS 当宽度为百分比的时候，如何让高等于宽

说明： 1、将盒子的宽度设置为自己需要的百分比，这里以 16% 为例； 2、将盖盒子的高度设置为 100%； 3、通过伪类控制高度 ul li::before{ content: ""; padding-top...); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} 5、这样就实现了，无论设备的分辨率怎么变化...，这个盒子始终都是正方形的宽度啦！！...-- 当宽度为百分比的时候，如何让盒子始终保持正方形的状态 --> 1 ...-- 当宽度为百分比的时候，如何让盒子始终保持正方形的状态 --> 1

2.9K3 1

01_移动端布局基础

1.2 移动Web开发主流方案 1.2.1 单独制作移动端页面单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。...单独制作移动端页面优点可以充分考虑到平台的优势和局限性创建良好的用户体验设计网页在移动设备上加载更快单独制作移动端页面缺点移动端网站会产生多个URL（PC端一套URL，移动端一套URL）维护成本会增加...默认值 contain，cover完全填充在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。

981 0

移动端WEB开发之响应式布局

设备的划分情况：小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器） 1.2...适合单独做移动端开发 2.6 bootstrap栅格系统栅格系统英文为"grid systems" ,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。...超小屏幕（手机）设备（平板）>=768px 中等屏幕（桌面显示器）>=992px 宽屏设备（大桌面显示器）>=1200px .container 最大宽度自动（100%） 750px...书写内容 container宽度修改因为本效果图采取 1280的宽度，而Bootstrap 里面 container宽度最大为 1170px，因此我们需要手动改下container宽度...; } } 移动端总结移动端技术选型流式布局 (百分比布局) flex弹性布局(推荐) rem适配布局 (推荐) 响应式布局建议:我们选取一种主要技术选型

4.1K2 0

前端工程师之移动端布局基础

1.2 移动Web开发主流方案 1.2.1 单独制作移动端页面单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。...单独制作移动端页面优点可以充分考虑到平台的优势和局限性创建良好的用户体验设计网页在移动设备上加载更快单独制作移动端页面缺点移动端网站会产生多个URL（PC端一套URL，移动端一套URL）维护成本会增加...视觉视口视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。...、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。

751 0

移动webapp前端开发小结

一、页面head头部的meta声明针对移动设备的特性，在head标签内需要添加一些特殊的声明。.../*窗口宽度小于等于640px时，应用这些样式*/ } @media (min-width:721px) { /*窗口宽度大于等于721px时，应用这些样式*/ } 方法二、为满足查询条件的设备匹配不同的样式表..."> 三、响应式设计，自适应多分辨率的移动设备如果我们针对不同分辨率的移动设备匹配同一套CSS样式（比如：字体、图片大小等），最终显示的结果很可能某些分辨率上的效果不错、而其他分辨率的显示效果则会千差万别...这样box1还是正常显示，box2则为水平排列，且宽度为父元素的值-box1的宽度*/ } 3、背景渐变 background-image: -webkit-linear-gradient(top,#f7f7f7...如果设计稿上，同一位置（比如Tab切换）上的图标大小不同，在切图时建议通过留白的方式将图标手动处理为相同宽高，这样就可以让图标对齐，避免在写样式时通过代码样式来微调图标。

1.3K2 0

移动开发-流式布局

最大宽度 – max-height 最大高度 min-width 最小宽度 – min-height 最小高度图片 CSS初始化 normalize.css: 移动端CSS初始化推荐使用normalize.css...，可通过缩放去操作视觉视口理想视口 ideal viewport: 理想视口，对设备来讲，是最理想的视口尺寸，需要手动添写meta视口标签通知浏览器操作 meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致...，就是设备有多宽，布局视口就多宽二倍图: 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素=1物理像素多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...属性多倍图切图 cutterman: 图片移动端主流方案: 单独制作移动端页面 (主流)，通过判断设备，如果是移动设备打开，则跳到移动端页面响应式兼容移动端 (其次)，通过判断屏幕宽度来改变样式...设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1.1K3 0

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

一、视口标签设置参考【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签设置网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例...css 文件夹 , 在其中存放如下两个 css 样式文件 : normalize.css 初始化样式文件 : 参考【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页...在移动端网页布局中 , 网页布局宽度 = 移动设备宽度 , 因此在进行布局时 , 可以为网页布局的主体标签设置 100% 宽度 ; 2、设置布局最大宽度将京东手机端页面 , 拉倒最大便不再放大..., 如下图所示 , 这是因为该页面设置了最大像素 ; 一般移动端页面最大像素设置为 980 像素 ; 3、设置布局最小宽度将京东的手机端页面宽度压缩到最小 , 如下状态时 , 就不能再进行压缩了...进入调试模式 , 可以看到最大宽度是 1080 像素 , 最小宽度是 320 像素 ; 5、布局宽度设置 body { /* 网页布局宽度 = 设备宽度 */ width: 100%

2.4K1 0

响应式布局的实现

响应式布局的实现响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。...max-device-height: 定义输出设备的屏幕可见的最大高度。 max-device-width: 定义输出设备的屏幕最大可见宽度。...max-resolution: 定义设备的最大分辨率。 max-width: 定义输出设备中的页面最大可见区域宽度。...width: 定义输出设备中的页面可见区域宽度。单位百分比单位当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。...PC端还是平板或者是手机，或者是通过检测窗口分辨率而请求服务器，从而服务端重定向或者返回不同的页面，需要开发多个页面来适应不同的设备，通常自适应布局与响应式布局并不是单独使用的，可以通过开发一套PC端页面与一套移动端页面来实现自适应布局

2K3 0

从零开始学 Web 之移动Web（六）响应式布局

网页布局常见的网页布局方式分为以下四种： 1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。 2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。...应用在移动设备上就会带来严重的性能问题。...min-device-height 定义输出设备的屏幕的最小可见高度。 max-height 定义输出设备中的页面最大可见区域高度。 max-width 定义输出设备中的页面最大可见区域宽度。...在移动端，由于通过模拟器改变的是移动端设备的宽度，所以 min-width 与 min-device-height 效果一样；在 PC 端，如果改变浏览器的宽度，而我们电脑的宽度并没有改变，所以设备的宽度一定...向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖书写建议：如果是判断最小值 (min-width)，那么范围就应该从小到大写如果是判断最大值 (max-width)，那么范围就应该从大到小写

1.6K2 0

前端成神之路-移动web开发_流式布局

：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签 ?...最标准的viewport设置视口宽度和设备保持一致视口的默认缩放比例1.0 不允许用户自行缩放最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比...contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面（主流）通常情况下，网址域名前面加 m...通过判断设备，如果是移动设备打开，则跳到移动端页面。也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端： ? 京东移动端： ?...移动端大量使用 CSS3盒子模型box-sizin 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding CSS3盒子模型：盒子的宽度= CSS中设置的宽度

1.6K2 1

移动web开发_流式布局

：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口 2.4meta标签最标准的viewport...设置视口宽度和设备保持一致视口的默认缩放比例1.0 不允许用户自行缩放最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.0二倍图 ####3.1物理像素&物理像素比物理像素点指的是屏幕显示的最小颗粒...contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 4.0 移动开发选择和技术解决方案 ####4.1移动端主流方案 1.单独制作移动端页面（主流）通常情况下，网址域名前面加 m...也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端：京东移动端： 2.响应式页面兼容移动端（其次）响应式网站：即pc和移动端共用一套网站...移动端大量使用 CSS3盒子模型box-sizin 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding CSS3盒子模型：盒子的宽度= CSS中设置的宽度

1.3K1 0

动态 | 谷歌大脑用强化学习为移动设备量身定做最好最快的CNN模型

然而，为移动设备设计 CNN 模型是一个有挑战性的问题，因为移动模型需要又小又快，同时还要保持足够的准确率。...受到 AutoML 神经网络架构搜索研究的启发，谷歌大脑团队开始考虑能否通过 AutoML 的力量让移动设备的 CNN 模型设计也更进一步。...在谷歌 AI 博客的新博文中，他们介绍了用 AutoML 的思路为移动设备找到更好的网络架构的研究成果。雷锋网 AI 科技评论把博文编译如下。...以往的网络架构搜索方法中，模型的运行速度通常是借助另一种指标进行参考（比如考虑设备的每秒运算数目），而谷歌大脑此次的方法是通过在给定的上设备上运行模型，直接测量模型的运行时间长短；在这项研究中他们使用的就是自家的...为移动设备自动搜索神经网络架构的总体流程图对于网络架构搜索过程，为了在搜索的灵活性和搜索空间大小之间取得合适的平衡，谷歌大脑的研究人员们提出了一种新的因子分解层级化搜索空间，它的设计是把一整个卷积网络分解为一系列按顺序连接的模块

3221 0

响应式网页bootstrap

响应式网页设计根据设备尺寸，自动调整布局，有bootstrap和foundation等 bootstrap没有自定义标签，主要通过css扩展class foundation不兼容旧版本的ie 网格系统...相当于C#UI里面的容器系统，bootstrap对css进行扩展，使用了类似less文件中的变量定义，sacc不仅增加了变量还多了继承、混合、嵌套等功能布局中必须row包含col，不能单独col...bootstrap网格系统 col- 针对所有设备 col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) col-lg- 大桌面显示器...css属性上封装了三种布局方式，使用控件嵌套方式布局，设置宽度最大值和最小值 .container, which sets a max-width at each responsive breakpoint...speech用于屏幕阅读器移动端viewport自适应

6.8K3 0

两个 viewports 的故事-第二部分

我们将在本页讨论移动浏览器。如果你是刚刚接触移动端，我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。...移动浏览器的问题手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。...手机屏幕远小于桌面屏幕，最大宽度也就 400px 甚至更小（有些手机据称有更大的宽度，那是骗人的，或者至少给我们的是无用的信息）。...如果移动浏览器和桌面浏览器的工作原理相同，侧边栏至多显示 40px 宽，确实太窄了。你的自适应布局看上去被压扁了。解决这个问题的方法之一就是为移动浏览器设计特殊的网站。...除了你是否应该这样做的问题之外，实际的问题是只有很少的网络公司会为移动单独设计网站。手机浏览器的供应商希望为客户提供最好的用户体验，这意味着“尽可能如桌面显示的一样”。

1.8K7 0

浅谈移动端中的视口（viewport）

在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。...物理像素（设备像素，device pixels）指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。 CSS 像素（CSS pixels）是 CSS 和 JS 中使用的一个抽象概念。...1.2 三种视口移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。...，对 PC 端浏览器是无效的当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度单独设置 initial-scale 或 width 都会有兼容性问题...其与理想视口宽度的比值为1.5（2880/1920），这个比值叫做设备像素比：逻辑像素宽度 * 设备像素比 = 物理像素宽度设备像素比可以通过 window.devicePixelRatio 来获取

2.3K2 0

响应式设计

首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次当页面加载时，它使用 initial-scale 将缩放比设置为 100%。...# 添加响应式的列许多响应式设计遵循这种方法：当设计要求元素并排摆放时，只在大屏上将它们摆放在一行。在小屏下，允许每个元素单独一行，填满屏幕宽度。...更多响应式模式可以参考 this is responsive (opens new window)。 # 断点的选择不要总想着设备。市面上有成百上千中设备和屏幕分辨率，无法逐一测试。...如果可以的话，建议在移动设备上用别的方式组织数据。比如将每一行数据单独用一块区域展示，让每块区域顺序叠放，或者用更适合小屏的可视化图形或者图表展示。但是，有时候就是需要用表格。...不仅要让图片适应屏幕，还要考虑移动端用户的带宽限制。图片通常是网页上最大的资源。首先要保证图片充分压缩。还要避免不必要的高分辨率图片，而是否必要则取决于视口大小。

2.1K1 0

移动端viewport属性说明笔记

# CSS 像素（CSS pixels）是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。...# 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。 ?...端浏览器无效缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性

1.6K2 0

PC端、移动端的页面适配及兼容处理

前端模块加载器主要负责按需加载，以提高页面加载速度，css预处理器的变量、运算、嵌套等特性可大大提高手动计算响应式的效率，妈妈再也不用担心我把比例算错了。当然后两者可参考需求及成本决定是否采用。...（一）几个概念 1.css像素 html中度量的单位用px来计算，在pc中往往 1 css px ＝ 1 物理像素 css像素时抽象和相对的了，在不同设备中1px对应不同的设备像素；iphone3分辨率是...5.layout viewport 移动设备的默认viewport,css布局是以layout viewport 来做为参考系计算的 document.documenElement.clientWidth...,ideal viewport 的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对ideal viewport设计的网站都可以完美的呈现给用户。...//UI-width: 布局宽度 //device-width:屏幕分辨率宽度 iphone4为640 //target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放

2.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css初学位置随机调整，为屏幕宽度的50%

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

CSS 当宽度为百分比的时候，如何让高等于宽

01_移动端布局基础

移动端WEB开发之响应式布局

前端工程师之移动端布局基础

移动webapp前端开发小结

移动开发-流式布局

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

响应式布局的实现

从零开始学 Web 之移动Web（六）响应式布局

前端成神之路-移动web开发_流式布局

移动web开发_流式布局

动态 | 谷歌大脑用强化学习为移动设备量身定做最好最快的CNN模型

响应式网页bootstrap

两个 viewports 的故事-第二部分

浅谈移动端中的视口（viewport）

响应式设计

移动端viewport属性说明笔记

PC端、移动端的页面适配及兼容处理

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐