Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Boxa membrana tweeter infundata

ajutor

Whisky for Mac

Xiaomi 14 Gpay
 Izolare zid exterior de scandura

Dezinstalare drivere W11 23H3

Recomandare masina de spalat fiab...

BSOD din cauza Intel Audio DSP dr...
 De ce sunt oamenii nostalgici

Cum vand casa fara factura Hidroe...

Scor FICO minim

Tonometru compensat CAS?
 polita RCA ONLINE

Termostat frigider - verificare

Mai au PC-urile vreun viitor?

Centrala termica immergas
 

Media Queries CSS

- - - - -
Last Updated: Aug 26 2018 20:32, Started by Cosmin4sul , Aug 25 2018 22:51  
  ·  
  • Please log in to reply
10 replies to this topic

#1
Cosmin4sul
Posted 25 August 2018 - 22:51

Cosmin4sul

    New Member

  • Grup: Junior Members
  • Posts: 22
  • Înscris: 28.01.2015
Salut.

Tocmai ce am terminat de editat primul meu site si am întâmpinat o problemă după ce l-am făcut public. Problema este la afișarea acestuia pe mobil. Am editat in Css @media screen and (max-width: 360px){} [Atâți pixel are telefonul meu in Css] si cand deschid site-ul pe mobil nu imi afișează dimensiunile corecte,chiar dacă offline se vede bine (am făcut dimensiule după tools-ul chrome-ului pentru telefon si de pe browserul blisk special pentru "mobile vision" ). Ma poate ajuta cineva care se pricepe? Sa găsim o modalitate de a putea vedea ce am editat până acum si sa imi gaseasca problema. Am incercat in nenumarate feluri sa schimb dar nimic. Voi lăsa un link cu 2 poze ca sa vedeti despre ce este vorba. Prima este cum ar trebui să arate iar a doua cum arată de fapt. https://imgur.com/a/xnCnaOv

Edited by Cosmin4sul, 25 August 2018 - 22:52.

#2
Extinct
Posted 25 August 2018 - 23:15

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007

View PostCosmin4sul, on 25 august 2018 - 22:51, said:

Salut.

Tocmai ce am terminat de editat primul meu site si am întâmpinat o problemă după ce l-am făcut public. Problema este la afișarea acestuia pe mobil. Am editat in Css @media screen and (max-width: 360px){} [Atâți pixel are telefonul meu in Css] si cand deschid site-ul pe mobil nu imi afișează dimensiunile corecte,chiar dacă offline se vede bine (am făcut dimensiule după tools-ul chrome-ului pentru telefon si de pe browserul blisk special pentru "mobile vision" ). Ma poate ajuta cineva care se pricepe? Sa găsim o modalitate de a putea vedea ce am editat până acum si sa imi gaseasca problema. Am incercat in nenumarate feluri sa schimb dar nimic. Voi lăsa un link cu 2 poze ca sa vedeti despre ce este vorba. Prima este cum ar trebui să arate iar a doua cum arată de fapt. https://imgur.com/a/xnCnaOv

Adauga-i chestia asta in head:

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

#3
Bogdan09
Posted 26 August 2018 - 11:07

Bogdan09

    Junior Member

  • Grup: Members
  • Posts: 61
  • Înscris: 18.05.2006
Pe langa ce a spus colegul Extinct sa adaugi in html adauga asta in css:
* {
box-sizing: border-box
  }
Sunt chestiile de baza pt mobile responsive.
Totodata ai putea folosi si asta un al doilea fisier reset.css, nu gasesc butonul pt atasat fisiere, asa ca adaug aici codul:

/*CSS reset code*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Edited by Bogdan09, 26 August 2018 - 11:08.

#4
Cosmin4sul
Posted 26 August 2018 - 11:29

Cosmin4sul

    New Member

  • Grup: Junior Members
  • Posts: 22
  • Înscris: 28.01.2015
Codul de resetare l-am folosit de la început pentru ca sa fie css cu setarile default pentru că am scris niste coduri in css inainte sa incep sa editeze site-ul.O sa incerc sa adaug codurile voastre si o sa revin cu un răspuns.

#5
Cosmin4sul
Posted 26 August 2018 - 12:43

Cosmin4sul

    New Member

  • Grup: Junior Members
  • Posts: 22
  • Înscris: 28.01.2015
Bogdan09 ,codul * { box-sizing: border-box } îl adaug in @media sau doar in css?

#6
Bogdan09
Posted 26 August 2018 - 13:00

Bogdan09

    Junior Member

  • Grup: Members
  • Posts: 61
  • Înscris: 18.05.2006
doar in css, conform celor de la w3s asta ar fi prima linie din css cu care incepi.

#7
unbrutus
Posted 26 August 2018 - 13:15

unbrutus

    Guru Member

  • Grup: Senior Members
  • Posts: 16,299
  • Înscris: 23.02.2017

View PostBogdan09, on 26 august 2018 - 11:07, said:

Pe langa ce a spus colegul Extinct sa adaugi in html adauga asta in css:
* {
box-sizing: border-box
  }
Sunt chestiile de baza pt mobile responsive.
box-sizing nu are nici o influenta asupra comportamentului responsive al unui site

View PostExtinct, on 25 august 2018 - 23:15, said:


Adauga-i chestia asta in head:

<meta name="viewport" content="width=device-width, initial-scale=1">
asta e cel mai probabil solutia. Pt un raspuns complet, ar trebui sa vedem ce faci tu acolo.
Pt a arata ce faci tu acolo, foloseste http://jsfiddle.net/ si posteaza linkul cu tot codul tau... daca inveti sa folosesti jsfiddle ai invatat deja f mult

#8
Cosmin4sul
Posted 26 August 2018 - 13:24

Cosmin4sul

    New Member

  • Grup: Junior Members
  • Posts: 22
  • Înscris: 28.01.2015
Momentan nu sunt acasă băieți, cand ajung acasa incerc codurile si va spun daca s-a rezolvat sau nu :)

#9
Cosmin4sul
Posted 26 August 2018 - 16:24

Cosmin4sul

    New Member

  • Grup: Junior Members
  • Posts: 22
  • Înscris: 28.01.2015
Multumesc mult Extinct, asta era problema, nu aveam adaugat la paginile html acel cod si de aceea nu imi afisa. O zi frumoasa.

#10
Cosmin4sul
Posted 26 August 2018 - 18:12

Cosmin4sul

    New Member

  • Grup: Junior Members
  • Posts: 22
  • Înscris: 28.01.2015
Revin cu încă o problemă..de data aceasta este in legătură cu modul landscape pentru iphone-uri/ipade-uri. Pentru cele cu android pot sa editez si imi afișează corespunzător folosind codul " @media screen and (max-width: 640px) and (orientation: landscape){}" dar pentru iphone-uri nu se schimba nici o setare. Care ar putea fi problema? am incercat mai multe coduri de pe internet dar tot nu am rezolvat.

Edited by Cosmin4sul, 26 August 2018 - 18:13.

#11
unbrutus
Posted 26 August 2018 - 20:32

unbrutus

    Guru Member

  • Grup: Senior Members
  • Posts: 16,299
  • Înscris: 23.02.2017
deja ti-am zis ce ai de facut, daca esti baiat destept faci ce ti-am zis si ai invatat ceva util pe viata: jsfiddle.
Go for it

Anunturi

Bun venit pe Forumul Softpedia!
Back to Web Design / Flash / Graphix

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Webmaster Corner
  4. → Web Design / Flash / Graphix
Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate